a,
.btn,
button,
span,
sub,
sup,
p,
input,
select,
textarea,
li,
img,
svg,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6, i[class^=icon-], i[class^=flaticon-] {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.bg-theme-primary {
  background-color: var(--bd-primary);
}

.bg-theme-secondary {
  background-color: var(--bd-secondary);
}

.bg-theme-tertiary {
  background-color: var(--bd-tertiary);
}

.bg-theme-quaternary {
  background: var(--bd-quaternary);
}
.white-color {
  color: var(--bd-white) !important;
}
:root {
  /**
  @font family declaration
  */
  --bd-ff-inter: "Inter", sans-serif;
  --bd-ff-dm-sans: "DM Sans", sans-serif;
  --bd-ff-kanit-sans: "Kanit", sans-serif;
  --bd-ff-jakarta-sans: "Plus Jakarta Sans", sans-serif;
  --bd-ff-epilogue-sans: "Epilogue", sans-serif;
  --bd-ff-outfit-sans: "Outfit", sans-serif;
  --bd-ff-bebas-sans: "Bebas Neue", sans-serif;
  --bd-ff-fontawesome: "Font Awesome 6 Pro";
  --bd-ff-icomoon: "icomoon";
  /**
  @color declaration
  */
  --bd-white: #FFFFFF;
  --bd-black: #121212;
  --bd-placeholder: #828282;
  --bd-selection: #262626;
  --bd-gray: #EDEDED;
  --bd-heading: #121212;
  --bd-primary: #ed1c24;
  --bd-secondary: #ed1c24;
  --bd-tertiary: #D90A2C;
  --bd-text-body: #555555;
  --bd-text-secondary: #DDDDDD;
  --bd-bg-secondary: #FFECE3;
  --bd-border-primary: #ECECEC;
  --bd-border-secondary: rgba(220, 220, 220, 1);
  --bd-border-tertiary: rgb(75, 78, 82);
  /**
  @font weight declaration
  */
  --bd-fw-normal: normal;
  --bd-fw-thin: 100;
  --bd-fw-elight: 200;
  --bd-fw-light: 300;
  --bd-fw-regular: 400;
  --bd-fw-medium: 500;
  --bd-fw-sbold: 600;
  --bd-fw-bold: 700;
  --bd-fw-ebold: 800;
  --bd-fw-black: 900;
  /**
  @font size declaration
  */
  --bd-fs-body: 16px;
  --bd-fs-p: 16px;
  --bd-fs-h1: 64px;
  --bd-fs-h2: 48px;
  --bd-fs-h3: 40px;
  --bd-fs-h4: 32px;
  --bd-fs-h5: 24px;
  --bd-fs-h6: 20px;
  --bd-fs-b1: 14px;
  --bd-fs-b2: 16px;
  --bd-fs-b3: 18px;
}

/*----------------------------------------*/
/*  1.1 Animation css
/*----------------------------------------*/
@keyframes topToBottom {
  0% {
    top: -30%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@keyframes popupBtn {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes translate-left {
  0% {
    -webkit-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateX(22px) translateY(-50%);
    transform: translateX(22px) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(30px) translateY(-50%);
    transform: translateX(30px) translateY(-50%);
    opacity: 0;
  }
}
@keyframes translate-right {
  0% {
    -webkit-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
  }
  75% {
    -webkit-transform: translateX(-22px) translateY(-50%);
    transform: translateX(-22px) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(-30px) translateY(-50%);
    transform: translateX(-30px) translateY(-50%);
    opacity: 0;
  }
}
@keyframes rotateScale {
  from {
    transform: scale(0.5) rotate(310deg);
    opacity: 0.5;
  }
  to {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg) scale(1.05);
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes tp-loading {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 3150;
  }
  100% {
    stroke-dashoffset: -1131;
    stroke-dasharray: 1128, 3138;
  }
}
@keyframes tp-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
/*-----------------------------------------------------------------------------------

    Template Name: Delixa - Creative Digital Agency HTML5 Template
    Author: ThemeArray
    Support: themearray@gmail.com
    Description: Creative Digital Agency related HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Animate
		1.2 Commmon
		1.3 Theme
		1.4 Typography

	-----------------
    02. utils CSS
	-----------------
	    2.1 Breakpoint
		2.2 Extends
		2.3 Colors
		2.4 Mixins
		2.5 Root

	-----------------
    03. COMPONENTS CSS
	-----------------
		3.1 Back to top
		3.2 Button
		3.3 Offcanvas
		3.4 Pagination
		3.5 Prealoder
		3.6 Section-title

	-----------------
    04. HEADER CSS
	-----------------
		4.1 Header 1
		4.2 Header 2
		4.3 Header 3
		4.4 Header 4

    ---------------------------------
	05. MENU CSS
	---------------------------------
		5.1 Meanmenu
		5.2 Menu


	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer 1
		6.2 Footer 2
		6.3 Footer 3
		6.4 Footer 4


	---------------------------------
	07. BANNER CSS
	---------------------------------
		7.1 Banner Style 1
		7.2 Banner Style 2
		7.3 Banner Style 3
		7.4 Banner Style 4

	---------------------------------
	08. PAGES CSS
	---------------------------------
		8.1 About css
		8.2 Blog Details css
		8.3 Blog css
		8.4 Brand css
		8.5 Capabilities css
		8.6 Contact css
		8.7 Counter css
		8.8 Faq css
		8.9 Feature css
		8.10 Identity css
		8.11 Pricing css
		8.12 Project Details css
		8.13 Service Details css
		8.14 Service css
		8.15 Team Details css
		8.16 Team css
		8.17 Testimonial css
		8.16 Tools css


/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
.header_absolute {
  position: absolute;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p.b1 {
  font-size: 24px;
  line-height: 34px;
}

p.b2 {
  font-size: 18px;
  line-height: 28px;
}

p.b3 {
  font-size: 16px;
  line-height: 26px;
}

a {
  text-decoration: none;
  transition: all ease 0.3s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  text-decoration: none;
  color: inherit;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
  transition: 0.3s;
}

img {
  max-width: 100%;
  object-fit: cover;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

hr:not([size]) {
  margin: 0;
  border-color: var(--bd-border-secondary);
  opacity: 1;
  border-width: 1px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
textarea {
  outline: none;
  background-color: var(--bd-bg-1);
  height: 60px;
  width: 100%;
  font-size: 15px;
  color: rgba(124, 126, 130, 0.69);
  border: none;
  padding: 0 25px;
  color: var(--bd-black);
}
.bd-theme-light input[type=text],
.bd-theme-light input[type=email],
.bd-theme-light input[type=tel],
.bd-theme-light input[type=number],
.bd-theme-light input[type=password],
.bd-theme-light textarea {
  background-color: rgba(235, 235, 235, 0.9);
  color: rgba(124, 126, 130, 0.69);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus {
  border-color: var(--bd-primary);
}

*::-moz-selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

::selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

*::-moz-placeholder {
  opacity: 1;
  font-size: 16px;
  color: var(--bd-body-secondary);
}

*::placeholder {
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-body-secondary);
}

strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--bd-black);
}

/*----------------------------------------
   Icomoon customize
-----------------------------------------*/
i[class^=icon-] {
  line-height: 1;
  top: 2px;
  position: relative;
}

.bd-sticky {
  position: sticky;
  top: 120px;
}

/*----------------------------------------
   Flaction customize
-----------------------------------------*/
i[class^=flaticon-] {
  line-height: 1;
  top: 2px;
  position: relative;
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 25px;
}
@media (max-width: 575px) {
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 40px;
  }
}

@media (min-width: 1441px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}
.container-fluid {
  max-width: 1820px;
}

.row {
  --bs-gutter-x: 30px;
}

.gap-40 {
  row-gap: 25px;
}

.g-15,
.gx-15 {
  --bs-gutter-x: 16px;
}

.g-0 {
  --bs-gutter-x: 0px;
  --bs-gutter-x: 0px;
}

.g-10,
.gx-10 {
  --bs-gutter-x: 10px;
}

.g-25,
.gx-25 {
  --bs-gutter-x: 25px;
}

.g-30,
.gx-30 {
  --bs-gutter-x: 30px;
}

.g-30,
.gy-30 {
  --bs-gutter-y: 30px;
}

.g-25,
.gy-25 {
  --bs-gutter-y: 25px;
}

.g-20,
.gy-20 {
  --bs-gutter-y: 20px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.g-40,
.gx-40 {
  --bs-gutter-x: 30px;
  --bs-gutter-x: 30px;
}
@media only screen and (min-width: 992px) {
  .g-40,
  .gx-40 {
    --bs-gutter-x: 40px;
  }
}

.g-45,
.gx-45 {
  --bs-gutter-x: 45px;
}

.g-40,
.gy-40 {
  --bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
  --bs-gutter-x: 50px;
}
@media (max-width: 575px) {
  .g-50,
  .gx-50 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 576px) {
  .g-50,
  .gx-50 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-main {
      height: 100vh;
      position: relative;
  }
  .banner-video {
      height: 102vh;
  }
  .g-50,
  .gx-50 {
    --bs-gutter-x: 50px;
  }
}

.g-60,
.gx-60 {
  --bs-gutter-x: 60px;
}

.g-50,
.gy-50 {
  --bs-gutter-y: 30px;
}
@media only screen and (min-width: 1200px) {
  .g-50,
  .gy-50 {
    --bs-gutter-y: 50px;
  }
}

.g-60,
.gy-60 {
  --bs-gutter-y: 60px;
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1280px;
}
@media only screen and (min-width: 1400px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 850px;
  }
}
@media only screen and (min-width: 992px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 820px;
  }
}
@media only screen and (min-width: 768px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 750px;
  }
}
@media only screen and (max-width: 768px) {
  .feature-gallery-content-wrapper {
    height: 200px !important;
  }
  .feature-gallery-img img {
    display: none !important;
  }
  .banner-main {
    height: 58vh !important;
  }
  .featured-single {
    position: relative;
    padding-right: 0px !important;
    margin-bottom: 30px !important;
  }
}
.mfp-close {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mfp-close:hover {
  color: var(--bd-white);
}
.mfp-close::after {
  position: absolute;
  content: "\f00d";
  height: 100%;
  width: 100%;
  font-family: var(--bd-ff-fontawesome);
  font-size: 31px;
  font-weight: 200;
  right: -20px;
  margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px), only screen and (min-width: 768px) {
  .mfp-close::after {
    right: 15px;
    margin-top: -30px;
  }
}

.line-pattern-group {
  max-width: 1115px;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-left: 1px solid var(--bd-border-primary);
  border-right: 1px solid var(--bd-border-primary);
  display: flex;
  z-index: -1;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .line-pattern-group {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .line-pattern-group {
    max-width: 1296px;
    width: 100%;
  }
}
.line-pattern-group .line {
  width: 33%;
  height: 100%;
  border-right: 1px solid var(--bd-border-primary);
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.mouse-cursor {
  position: fixed;
  left: -4px;
  top: -4px;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  width: 8px;
  height: 8px;
  z-index: 999;
  background-color: var(--bd-black);
  -webkit-transition: 0.4s;
  transition: 0.3s;
}

.cursor-outer {
  margin-left: -16px;
  margin-top: -16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bd-black);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
  opacity: 0.5;
  pointer-events: none;
  -webkit-transition: 0.7s;
  transition: 0.4s;
}
.cursor-outer.cursor-hover {
  opacity: 0;
}

.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.opacity-05 {
  opacity: 0.5;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
  overflow-x: clip;
}

@media (max-width: 575px) {
  .o-xs {
    overflow-x: hidden;
  }
}

.color-white {
  color: var(--bd-white);
}

.valign {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/*----------------------------------------
    Body background 
-----------------------------------------*/
.bg-white {
  background: var(--bd-white);
}

.clr-white {
  color: var(--bd-white);
}

.section-space {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) {
  .section-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.section-space-top {
  padding-top: 80px;
}
@media only screen and (min-width: 992px) {
  .section-space-top {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-top {
    padding-top: 80px;
  }
}

.section-space-bottom {
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) {
  .section-space-bottom {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-bottom {
    padding-bottom: 80px;
  }
}

.page-title-space-bottom {
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) {
  .page-title-space-bottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .page-title-space-bottom {
    padding-bottom: 100px;
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}

/*---------------------------------------
    - Color
-----------------------------------------*/
.color-primary {
  color: var(--bd-primary);
}

.color-secondary {
  color: var(--bd-secondary);
}

.color-theme {
  color: var(--bd-theme);
}

.color-tertiary {
  color: var(--bd-tertiary);
}

/*--
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

/*-- Margin Bottom --*/
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

/*-- Margin Left --*/
.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

/*-- Margin Right --*/
.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

/*-- Padding Top --*/
.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

/*-- Padding Bottom --*/
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

/*-- Padding Left --*/
.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

/*-- Padding Right --*/
.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

/*---------------------------------
   1.4 Typography css start 
---------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-size: 16px;
  font-weight: var(--bd-fw-medium);
  background: var(--bd-white);
  color: var(--bd-black);
  line-height: 1.5;
  font-family: var(--bd-ff-inter);
}

p {
  font-size: 17px;
  font-weight: var(--bd-fw-medium);
  color: var(--bd-text-body);
  margin-bottom: 30px;
  line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bd-ff-dm-sans);
  color: var(--bd-heading);
  margin-top: 0px;
  line-height: 1.1;
  margin-bottom: 0;
  font-weight: var(--bd-fw-sbold);
  word-break: break-word;
}

h1 {
  font-size: var(--bd-fs-h1);
}

h2 {
  font-size: var(--bd-fs-h2);
}

h3 {
  font-size: var(--bd-fs-h3);
}

h4 {
  font-size: var(--bd-fs-h4);
}

h5 {
  font-size: var(--bd-fs-h5);
}
h5.small {
  font-size: 20px;
}

h6 {
  font-size: var(--bd-fs-h6);
}

/*----------------------------------------*/
/*  3.3 Offcanvas css
/*----------------------------------------*/
.offcanvas-info {
  background: var(--bd-black);
  height: 100%;
  position: fixed;
  padding: 30px 30px;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-color: var(--bd-primary) #000000;
}
@media (max-width:480px) {
  .offcanvas-info {
    padding: 20px;
    width: 100%;
  }
}

.offcanvas-info.info_open {
  transform: translateX(0);
  opacity: 1;
}

.offcanvas_overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  z-index: 555;
  background-color: var(--bd-black);
  opacity: 0.8;
  transition: width 0.5s linear;
}

.offcanvas_overlay.overlayopen {
  width: 100%;
}

.offcanvas-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  align-items: center;
  border-bottom: 1px solid #363535;
}

.offcanvas-logo {
  width: 180px;
}
@media (max-width: 575px) {
  .offcanvas-logo {
    max-width: 130px;
  }
}

.offcanvas-icon button {
  font-size: 16px;
  color: var(--bd-black);
  height: 40px;
  width: 40px;
  background: var(--bd-white);
  border-radius: 50%;
}
.offcanvas-icon button i {
  transition: 0.5s;
}
.offcanvas-icon button:hover {
  background-color: var(--bd-primary);
}
.offcanvas-icon button:hover i {
  transform: rotate(90deg);
}

.footer-social-icon.offcanvas-social ul li a {
  font-size: 16px;
  color: var(--bd-white);
  text-align: center;
}
.footer-social-icon.offcanvas-social ul li a:hover {
  color: var(--bd-white);
  background-color: var(--bd-black);
}

.offcanvas-link ul li {
  margin-bottom: 15px;
}
.offcanvas-link ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  color: var(--bd-black);
  font-size: 16px;
}
.offcanvas-link ul li a span {
  width: 20px;
}
.offcanvas-link ul li a:hover {
  color: var(--bd-primary);
}

.offcanvas-contact {
  padding-top: 20px;
  border-top: 1px solid #363535;
}

.follow-link {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 500;
  color: var(--bd-white);
}
@media (max-width: 575px) {
  .follow-link {
    font-size: 18px;
  }
}

.footer-social-icon.offcanvas-social ul {
  justify-content: start;
}

.mean-container .mean-nav ul li li a.stretched-link {
  width: 100%;
  padding: 0;
  position: inherit;
  text-align: center;
  font: 500 16px var(--bd-ff-dm-sans-sans);
}
.mean-container .mean-nav ul li li a.stretched-link::before {
  display: none;
}

.offcanvas-menu-two .mean-container .mean-nav ul li a.stretched-link {
  font: 400 16px var(--bd-ff-kanit-sans);
}
.offcanvas-menu-two .mean-container .mean-nav ul li a {
  font: 400 16px var(--bd-ff-kanit-sans);
}
.offcanvas-menu-two .follow-link {
  font-family: var(--bd-ff-kanit-sans);
}

.offcanvas-menu-four .mean-container .mean-nav ul li a.stretched-link {
  font: 400 18px var(--bd-ff-bebas-sans);
}
.offcanvas-menu-four .mean-container .mean-nav ul li a {
  font: 400 18px var(--bd-ff-bebas-sans);
}
.offcanvas-menu-four .follow-link {
  font-family: var(--bd-ff-bebas-sans);
}

.offcanvas-info-two {
  position: fixed;
  inset: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  z-index: 9999;
  transition-delay: 0.3s;
  transition: all 0.5s ease-in-out;
  background-color: var(--bd-black);
  overflow-y: scroll;
}

.offcanvas_open {
  transform: translateX(0px);
  visibility: visible;
  opacity: 1;
}

.offcanvas-body-two {
  display: flex;
  justify-content: space-between;
}

.offcanvas-left {
  width: 100%;
  padding: 20px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  max-height: 100vh;
}
@media only screen and (min-width: 768px) {
  .offcanvas-left {
    width: 50%;
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left {
    padding: 80px 60px;
  }
}
@media only screen and (min-width: 1600px) {
  .offcanvas-left {
    padding: 80px 100px;
  }
}
.offcanvas-left::-webkit-scrollbar {
  width: 3px;
}
.offcanvas-left::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--bd-black);
  border-radius: 10px;
}
.offcanvas-left::-webkit-scrollbar-thumb {
  background: var(--bd-primary);
  border-radius: 10px;
}
.offcanvas-left .mean-container .mean-nav ul li > a {
  font: 500 16px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 768px) {
  .offcanvas-left .mean-container .mean-nav ul li > a {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .offcanvas-left .mean-container .mean-nav ul li > a {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left .mean-container .mean-nav ul li > a {
    font-size: 40px;
    font-weight: 600;
  }
}
@media only screen and (min-width: 1400px) {
  .offcanvas-left .mean-container .mean-nav ul li > a {
    font-size: 50px;
  }
}
.offcanvas-left .offcanvas-top {
  border-color: #363535;
}
.offcanvas-left .mean-container .mean-nav ul li {
  border-color: #363535;
}
.offcanvas-left .mean-container .mean-nav ul li a.mean-expand {
  font-size: 20px !important;
  right: 0;
  top: 5px;
  height: 30px;
  width: 30px;
}
@media only screen and (min-width: 992px) {
  .offcanvas-left .mean-container .mean-nav ul li a.mean-expand {
    top: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left .mean-container .mean-nav ul li a.mean-expand {
    font-size: 40px !important;
    top: 25px;
    height: 50px;
    width: 50px;
  }
}
.offcanvas-left .mean-container .mean-nav ul li li a {
  font-size: 15px;
  padding-left: 30px;
}
@media only screen and (min-width: 768px) {
  .offcanvas-left .mean-container .mean-nav ul li li a {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left .mean-container .mean-nav ul li li a {
    font-size: 24px;
  }
}
.offcanvas-left .mean-container .mean-nav ul li li a.stretched-link {
  width: 100%;
  padding: 0;
  position: inherit;
  text-align: center;
  font: 500 16px var(--bd-ff-epilogue-sans);
}
.offcanvas-left .mean-container .mean-nav ul li li a.stretched-link::before {
  display: none;
}
@media only screen and (min-width: 576px) {
  .offcanvas-left .home-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 768px) {
  .offcanvas-left .home-menu-grid {
    padding: 15px 0;
  }
}
@media only screen and (min-width: 992px) {
  .offcanvas-left .home-menu-grid {
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left .home-menu-grid {
    padding: 15px 0;
    column-gap: 15px;
    row-gap: 15px;
  }
}
@media only screen and (min-width: 1600px) {
  .offcanvas-left .home-menu-grid {
    padding: 20px 0;
    column-gap: 20px;
    row-gap: 20px;
  }
}

.offcanvas-right {
  padding: 80px 100px;
  right: 0;
  width: 650px;
  height: 100%;
  display: none;
}
@media only screen and (min-width: 768px) {
  .offcanvas-right {
    display: block;
    width: 50%;
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .offcanvas-right {
    padding: 80px 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .offcanvas-right {
    width: 650px;
  }
}
@media only screen and (min-width: 1600px) {
  .offcanvas-right {
    padding: 80px 100px;
  }
}

.offcanvas-search-input {
  margin-bottom: 150px;
  position: relative;
}
.offcanvas-search-input .offcanvas-input-btn {
  color: var(--bd-text-secondary);
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.offcanvas-search-input .offcanvas-input-btn:hover {
  color: var(--bd-primary);
}
.offcanvas-search-input input {
  height: 55px;
  border-radius: 11px;
  border: 1px solid #363535;
  color: var(--bd-text-secondary);
  font: 400 18px var(--bd-ff-epilogue-sans);
  padding-right: 55px;
}
.offcanvas-search-input::placeholder, .offcanvas-search-input::-moz-placeholder {
  color: var(--bd-text-secondary);
  font: 400 20px var(--bd-ff-epilogue-sans);
}

.offcanvas-two-contact h6 {
  font: 500 24px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-secondary);
  margin-bottom: 50px;
  padding-bottom: 10px;
  border-bottom: 1px solid #363535;
}
.offcanvas-two-contact a, .offcanvas-two-contact p {
  font: 400 20px/1.57 var(--bd-ff-epilogue-sans);
  display: block;
  color: var(--bd-text-secondary);
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .offcanvas-two-contact a, .offcanvas-two-contact p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
@media only screen and (min-width: 992px) {
  .offcanvas-two-contact a, .offcanvas-two-contact p {
    font-size: 20px;
    margin-bottom: 15px;
  }
}
.offcanvas-two-contact a:hover {
  color: var(--bd-primary);
}

.offcanvas-icon-two {
  text-align: end;
  margin-bottom: 15px;
}

.offcanvas-close {
  font: 500 16px var(--bd-ff-epilogue-sans);
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bd-white);
}
.offcanvas-close i {
  transition: 0.5s;
}
.offcanvas-close:hover {
  background-color: var(--bd-primary);
}
.offcanvas-close:hover i {
  transform: rotate(90deg);
}
@media only screen and (min-width: 768px) {
  .offcanvas-close {
    height: 45px;
    width: 45px;
    font-size: 24px;
  }
}

.share-link ul {
  display: flex;
  gap: 10px;
}
.share-link ul li a {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: var(--bd-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-link ul li a:hover {
  background-color: var(--bd-primary);
}

/*----------------------------------------*/
/*  3.6 Section Title   css
/*----------------------------------------*/
.sub-title {
  font-size: 16px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  margin: 0 0 10px 12px;
}
.sub-title::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  height: 15px;
  width: 1px;
  background-color: var(--bd-black);
  transform: rotate(18deg);
}
.sub-title::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 3px;
  height: 15px;
  width: 1px;
  background-color: var(--bd-black);
  transform: rotate(18deg);
}

.sub-title.color-white::before {
  background-color: var(--bd-white);
}
.sub-title.color-white::after {
  background-color: var(--bd-white);
}

.section-title {
  font-size: 30px;
  font-weight: 500;
}
@media only screen and (min-width: 576px) {
  .section-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .section-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title {
    font-size: 60px;
  }
}

.featured-top-title {
  font-size: 40px;
  font-weight: 700;
  padding-right: 80px;
}
@media only screen and (min-width: 576px) {
  .featured-top-title {
    font-size: 60px;
    padding-right: 155px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-top-title {
    padding-right: 310px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-top-title {
    font-size: 80px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .featured-top-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .featured-top-title {
    font-size: 110px;
  }
}
.featured-top-title .font-italic {
  font-style: italic;
}
.featured-top-title img {
  margin-top: -15px;
}
@media (max-width: 575px) {
  .featured-top-title img {
    width: 90px;
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) {
  .featured-top-title img {
    width: 110px;
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-top-title img {
    width: 140px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-top-title img {
    width: 120px;
    margin-top: -15px;
  }
}
@media only screen and (min-width: 1200px) {
  .featured-top-title img {
    width: 190px;
    margin-top: -15px;
  }
}

.section-top-content {
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) {
  .section-top-content {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .section-top-content {
    margin-bottom: 80px;
  }
}

.sub-title-two {
  font: 400 16px var(--bd-ff-kanit-sans);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  letter-spacing: 5%;
}

.sub-title-three {
  font: 400 16px var(--bd-ff-kanit-sans);
  display: inline-block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .sub-title-three {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .sub-title-three {
    margin-bottom: 40px;
  }
}
.sub-title-three::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  width: 8px;
  background-color: var(--bd-text-body);
}

.section-title-two {
  font: 700 26px/1.27 var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .section-title-two {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title-two {
    font-size: 46px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-two {
    font-size: 55px;
  }
}
.section-title-two span {
  color: #ed1c24;
}

.section-title-three {
  font: 600 30px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .section-title-three {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-three {
    font-size: 46px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-three {
    font-size: 55px;
  }
}

.sub-title-four {
  font: 400 14px var(--bd-ff-outfit-sans);
  display: inline-block;
  position: relative;
  padding: 0px 40px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) {
  .sub-title-four {
    margin-bottom: 0;
  }
}
.sub-title-four::before, .sub-title-four:after {
  position: absolute;
  font-family: var(--bd-ff-fontawesome);
  top: 50%;
  transform: translateY(-50%);
  color: var(--bd-tertiary);
}
.sub-title-four::before {
  content: "[";
  left: 0;
}
.sub-title-four::after {
  content: "]";
  right: 0;
}

.section-title-four {
  font: 400 35px/1.1 var(--bd-ff-bebas-sans);
  letter-spacing: 2%;
}
@media only screen and (min-width: 768px) {
  .section-title-four {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-four {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-four {
    font-size: 86px;
  }
}

.section-title-four.text-center {
  text-align: start !important;
}
@media only screen and (min-width: 992px) {
  .section-title-four.text-center {
    text-align: center !important;
  }
}

.section-title-four.text-end {
  text-align: start !important;
}
@media only screen and (min-width: 992px) {
  .section-title-four.text-end {
    text-align: end !important;
  }
}

.page-title {
  font: 700 160px/1.1 var(--bd-ff-jakarta-sans);
}

/*----------------------------------------*/
/*  3.4 Pagination css
/*----------------------------------------*/
.pageination-wrapper {
  margin-top: 60px;
}
@media only screen and (min-width: 768px) {
  .pageination-wrapper {
    margin-top: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .pageination-wrapper {
    margin-top: 80px;
  }
}
.pageination-wrapper .pagination {
  gap: 7px;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .pageination-wrapper .pagination {
    gap: 15px;
  }
}
.pageination-wrapper .pagination .page-link {
  padding: 0px;
  margin: 0px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 16px var(--bd-ff-kanit-sans);
  background: var(--bd-white);
  color: var(--bd-black);
  border: 1px solid var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .pageination-wrapper .pagination .page-link {
    height: 50px;
    width: 50px;
    font-size: 18px;
  }
}
.pageination-wrapper .pagination .page-link:hover {
  background: var(--bd-black);
  border-color: var(--bd-black);
  color: var(--bd-white);
}
.pageination-wrapper .pagination .page-link:focus {
  box-shadow: none;
}
.pageination-wrapper .pagination .page-link i {
  font-weight: 500;
}
.pageination-wrapper .pagination .active {
  background: var(--bd-black);
  color: var(--bd-white);
  border-color: var(--bd-black);
}

/*----------------------------------------
   3.2  button css
-----------------------------------------*/
.theme-btn:hover .icon-box.icon-box-1 {
  transform: scale3d(1, 1, 1);
  margin-right: -17px;
  opacity: 1;
}
.theme-btn:hover .icon-box.icon-box-2 {
  transform: scale3d(0.5, 0.5, 1);
  margin-left: -50px;
  opacity: 0;
}
.theme-btn:hover .text-content {
  transform: scale3d(1, 1, 1);
}
.theme-btn .text-content {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-white);
  background-color: var(--bd-primary);
  padding: 12px 28px;
  border-radius: 24px;
  letter-spacing: 5%;
}
.theme-btn .icon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-white);
  background-color: var(--bd-primary);
  border: 2px solid var(--bd-white);
  position: relative;
  z-index: 1;
}
.theme-btn .icon-box i {
  transform: rotate(-45deg);
}
.theme-btn .icon-box.icon-box-1 {
  transform: scale3d(0.5, 0.5, 1);
  margin-right: -50px;
  opacity: 0;
}
.theme-btn .icon-box.icon-box-2 {
  transform: scale3d(1, 1, 1);
  margin-left: -17px;
  opacity: 1;
}

.theme-btn-one .text-content {
  font: 500 16px var(--bd-ff-inter);
  padding: 14px 26px;
  letter-spacing: 5%;
}

.theme-btn-two .text-content {
  font: 500 16px var(--bd-ff-jakarta-sans);
  padding: 14px 26px;
}

.theme-btn-three .text-content {
  font: 500 16px var(--bd-ff-epilogue-sans);
  padding: 15px 26px;
}

.btn-secondary {
  padding: 14px 29px;
  font: 400 16px var(--bd-ff-kanit-sans);
  background-color: var(--bd-black);
  border-radius: 3px;
  color: var(--bd-white);
  text-transform: uppercase;
  display: inline-flex;
  justify-content: center;
}
.btn-secondary:hover {
  background-color: var(--bd-secondary);
  color: var(--bd-black);
}

.btn-secondary-transparent {
  padding: 14px 29px;
  font: 400 16px var(--bd-ff-kanit-sans);
  background-color: transparent;
  border-radius: 3px;
  color: var(--bd-black);
  display: inline-flex;
  justify-content: center;
  border: 1px solid var(--bd-black);
}
.btn-secondary-transparent:hover {
  background-color: var(--bd-secondary);
  border-color: var(--bd-secondary);
}

.header-btn {
  padding: 14px 25px;
  border-radius: 3px;
  background-color: var(--bd-secondary);
  font: 400 16px var(--bd-ff-kanit-sans);
  text-transform: uppercase;
  border: 1px solid transparent;
  letter-spacing: 5%;
}
.header-btn:hover {
  background-color: transparent;
  border-color: var(--bd-secondary);
}

.fill_btn {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--bd-black);
  border-radius: 26px;
  font: 400 16px var(--bd-ff-outfit-sans);
  position: relative;
  overflow: hidden;
  letter-spacing: 5%;
}
.fill_btn:hover {
  background-color: var(--bd-tertiary);
  border-color: var(--bd-tertiary);
  color: var(--bd-white);
}

.arrow-btn-alt {
  font: 500 16px var(--bd-ff-outfit-sans);
  display: inline-block;
  position: relative;
}
.arrow-btn-alt:hover::before {
  width: 0px;
}
.arrow-btn-alt:hover span i {
  transform: rotate(0deg);
}
.arrow-btn-alt span {
  display: inline-block;
  margin-left: 3px;
}
.arrow-btn-alt span i {
  transform: rotate(-45deg);
  transition: 0.3s;
}
.arrow-btn-alt::before {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bd-black);
  transition: 0.3s;
}

.transparent-btn {
  font: 400 14px var(--bd-ff-kanit-sans);
}
.transparent-btn .btn_text {
  font-weight: 400;
}

/*----------------------------------------*/
/*  3.1 Back to top css
/*----------------------------------------*/
.backtotop-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
  background: var(--bd-primary);
}
@media (max-width:480px) {
  .backtotop-wrap {
    bottom: 20px;
    right: 20px;
  }
}
.backtotop-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.backtotop-wrap::after {
  position: absolute;
  font-family: var(--bd-ff-fontawesome);
  content: "\f062";
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-white);
  left: 0;
  top: 0;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.backtotop-wrap svg path {
  fill: none;
}
.backtotop-wrap svg.backtotop-circle path {
  stroke: #DDDDDD;
  stroke-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}

.progress-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px gray;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  mix-blend-mode: difference;
}
@media only screen and (min-width: 576px), (max-width: 575px) {
  .progress-wrap {
    right: 30px;
    bottom: 30px;
  }
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  content: "\f176";
  font-family: var(--bd-ff-fontawesome);
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  color: var(--bd-primary);
  left: 0;
  top: 0;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--bd-primary);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/*----------------------------------------*/
/*  3.5 Preloader css
/*----------------------------------------*/
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-black);
  z-index: 999;
}

.preloader-logo {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 576px) {
  .preloader-logo {
    height: 130px;
    width: 130px;
  }
}
@media only screen and (min-width: 768px) {
  .preloader-logo {
    height: 180px;
    width: 180px;
  }
}
.preloader-logo img {
  animation: zoom-in-zoom-out 2s ease-out infinite;
  width: 50px;
}
@media only screen and (min-width: 576px) {
  .preloader-logo img {
    width: 60;
  }
}
@media only screen and (min-width: 768px) {
  .preloader-logo img {
    width: 80px;
  }
}

.preloader-circle svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: tp-rotate 5s linear infinite;
}
.preloader-circle svg circle:last-child {
  stroke: var(--bd-primary);
  stroke-dashoffset: 0;
  stroke-dasharray: 1128, 3150;
  animation: tp-loading 4s linear infinite;
  transform-origin: center center;
}

.preloader-style-two .preloader-circle svg circle:last-child {
  stroke: var(--bd-secondary);
}

.preloader-style-three .preloader-circle svg circle:last-child {
  stroke: var(--bd-tertiary);
}

/* HEADER CSS */
/*----------------------------------------*/
/*  4.1 Header Style 1
/*----------------------------------------*/
.header-area {
  border-bottom: 1px solid var(--bd-border-primary);
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: 55;
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  .header-area {
    overflow: visible;
  }
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-header .logo {
  position: relative;
  margin: 12px 0px;
}
@media (max-width: 575px) {
  .main-header .logo {
    max-width: 130px;
  }
}

.header-right {
  display: flex;
  gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 576px), only screen and (min-width: 768px) {
  .header-right {
    gap: 20px;
  }
}

.bars_icon {
  width: 35px;
  height: 20px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 575px) {
  .bars_icon {
    width: 30px;
    flex: 0 0 auto;
  }
}
.bars_icon .line {
  width: 100%;
  height: 2px;
  background-color: var(--bd-black);
  display: inline-block;
  transition: color 0.2s ease-out;
  border-radius: 35px;
  transition: 0.3s;
}
.bars_icon .line:nth-child(2) {
  margin-left: 15px;
}
.bars_icon .line:nth-child(3) {
  margin-left: 8px;
}
.bars_icon:hover .line {
  margin-left: 0;
}

.sticky {
  position: fixed !important;
  top: 0;
  z-index: 111;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  background: var(--bd-white);
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.breadcrumb_header {
  border-bottom: 1px solid var(--bd-border-primary);
  padding-bottom: 15px;
}

/*----------------------------------------*/
/*  4.2 Header Style 2
/*----------------------------------------*/
.header-area .container-large {
  max-width: 1360px;
}

.header-style-two {
  border: 0;
  top: 30px;
}
@media (max-width: 575px) {
  .header-style-two {
    top: 20px;
  }
}
.header-style-two .main-header {
  background-color: var(--bd-white);
  padding: 0 15px;
  border-radius: 8px;
}
@media only screen and (min-width: 768px) {
  .header-style-two .main-header {
    padding: 0 35px;
  }
}
.header-style-two .main-menu ul > li > a {
  padding: 32px 0px;
}
.header-style-two .menu-item.active {
  border-color: var(--bd-secondary);
}

.header-style-two .sticky .main-header {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .header-style-two .sticky .main-header {
    padding: 0 20px;
  }
}

/*----------------------------------------*/
/*  4.3 Header Style 3
/*----------------------------------------*/
.transparent-header {
  border: 0;
  padding-top: 30px;
}
@media (max-width: 575px) {
  .transparent-header {
    padding-top: 20px;
  }
}
.transparent-header .main-header {
  align-items: center;
}
@media only screen and (min-width: 576px) {
  .transparent-header .main-header {
    align-items: start;
  }
}
@media only screen and (min-width: 768px) {
  .transparent-header .main-header {
    align-items: center;
  }
}
@media only screen and (min-width: 992px) {
  .transparent-header .main-header {
    align-items: start;
  }
}
@media only screen and (min-width: 768px) {
  .transparent-header .main-header .logo {
    margin-top: 0;
  }
}
.transparent-header .menu-item.active {
  border-color: var(--bd-primary);
}

.transparent-header .sticky .main-header {
  align-items: center;
}
.transparent-header .sticky .main-header .logo {
  margin: 12px 0px;
}
@media only screen and (min-width: 992px) {
  .transparent-header .sticky .main-header .logo {
    margin: 18px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .transparent-header .sticky .main-header .logo {
    margin: 24px 0;
  }
}
.transparent-header .sticky .primary-logo {
  display: none;
}
.transparent-header .sticky .secondary-logo {
  display: block;
}

.header-right .header-mail {
  font: 500 17px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-secondary);
  display: none;
}
.header-right .header-mail:hover {
  color: var(--bd-primary);
}
@media only screen and (min-width: 576px) {
  .header-right .header-mail {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .header-nav-icon {
    margin-left: 45px;
  }
}
@media only screen and (min-width: 992px) {
  .header-nav-icon {
    margin-left: 65px;
  }
}
@media only screen and (min-width: 1600px) {
  .header-nav-icon {
    margin-left: 75px;
  }
}
@media only screen and (min-width: 1750px) {
  .header-nav-icon {
    margin-left: 125px;
  }
}
.header-nav-icon .menu-button {
  height: 35px;
  width: 35px;
  position: relative;
  transition: 0.5s;
}
.header-nav-icon .menu-button:hover::before {
  background-color: var(--bd-primary);
}
.header-nav-icon .menu-button:hover::after {
  background-color: var(--bd-primary);
}
@media only screen and (min-width: 576px) {
  .header-nav-icon .menu-button {
    height: 40px;
    width: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .header-nav-icon .menu-button {
    height: 60px;
    width: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .header-nav-icon .menu-button {
    height: 70px;
    width: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .header-nav-icon .menu-button {
    height: 80px;
    width: 80px;
  }
}
.header-nav-icon .menu-button:hover {
  transform: rotate(90deg);
}
.header-nav-icon .menu-button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  top: 50%;
  background-color: #909090;
  transform: translateY(-50%);
  left: 0;
}
.header-nav-icon .menu-button::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #909090;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.sticky .header-nav-icon .menu-button {
  height: 35px;
  width: 35px;
}
@media only screen and (min-width: 576px) {
  .sticky .header-nav-icon .menu-button {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .sticky .header-nav-icon .menu-button {
    width: 60px;
    height: 60px;
  }
}
.sticky .header-nav-icon .menu-button:hover::before {
  background-color: var(--bd-text-body);
}
.sticky .header-nav-icon .menu-button:hover::after {
  background-color: var(--bd-text-body);
}
.sticky .header-right .header-mail {
  color: var(--bd-black);
}

.secondary-logo {
  display: none;
}

/*----------------------------------------*/
/*  4.4 Header Style 4
/*----------------------------------------*/
.header-style-four {
  border: 0;
}
.header-style-four .main-menu ul li:hover > a {
  color: var(--bd-tertiary);
}
.header-style-four .main-menu ul li a {
  font: 400 20px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
}
.header-style-four .main-menu ul li .sub-menu li:hover > a {
  color: var(--bd-tertiary) !important;
}
.header-style-four .main-menu ul li .sub-menu li .sub-menu li:hover a {
  color: var(--bd-tertiary) !important;
}
.header-style-four .menu-item:hover {
  border-color: var(--bd-tertiary) !important;
}
.header-style-four .menu-item.active {
  border-color: var(--bd-tertiary);
}

/* Banner CSS */
/*----------------------------------------*/
/*  7.1 banner Style 1
/*----------------------------------------*/
.banner-area {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 120px;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .banner-area {
    padding-top: 140px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-area {
    padding-top: 170px;
  }
}

.shape-wrapper {
  position: absolute;
  right: 12px;
  top: 125px;
  display: none;
}
@media only screen and (min-width: 576px) {
  .shape-wrapper {
    display: block;
  }
}
.shape-wrapper .shape-bg-primary {
  position: absolute;
  bottom: -30px;
  left: -20px;
  animation: slide-left 2s linear 0s infinite alternate-reverse both;
}

.banner-title {
  font-size: 55px;
  color: var(--bd-black);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) {
  .banner-title {
    font-size: 60px;
    margin-bottom: 50px;
    max-width: 300px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title {
    font-size: 80px;
    max-width: 400px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title {
    font-size: 110px;
    max-width: 100%;
  }
}
.banner-title span.text-stroke {
  text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
  color: var(--bd-white);
}

.project-counter {
  position: relative;
  max-width: 150px;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .project-counter {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .project-counter {
    margin-bottom: 190px;
  }
}
.project-counter p {
  font-size: 16px;
  margin-bottom: 0;
}
.project-counter .icon-arrow {
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner-thumb {
  margin-left: 0px;
}
@media only screen and (min-width: 576px) {
  .banner-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-thumb {
    margin-left: -250px;
  }
}

.reviewer-img ul {
  display: flex;
}
.reviewer-img ul li {
  background-color: var(--bd-white);
  margin-left: -15px;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: auto;
  border: 2px solid var(--bd-white);
}
.reviewer-img ul li:first-child {
  margin-left: 0;
}

.add-review {
  background-color: var(--bd-black);
  font-size: 20px;
  color: var(--bd-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.reviewer-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 40px;
}
@media only screen and (min-width: 576px) {
  .reviewer-wrapper {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .reviewer-wrapper {
    margin-top: 60px;
  }
}
.reviewer-wrapper p {
  font-size: 14px;
  margin-bottom: 0;
}

.ratting {
  color: #FFB657;
  font-size: 14px;
  margin-bottom: 2px;
}

.banner-left-wrapper {
  padding-right: 50px;
}
@media (max-width: 575px) {
  .banner-left-wrapper {
    padding-right: 0;
  }
}
@media only screen and (min-width: 576px) {
  .banner-left-wrapper {
    padding-right: 0;
  }
}

.banner-right-wrapper {
  padding-left: 0px;
}
@media only screen and (min-width: 576px) {
  .banner-right-wrapper {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) {
  .banner-right-wrapper {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-right-wrapper {
    padding-left: 60px;
  }
}

.brand-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/*----------------------------------------*/
/*  7.2 banner Style 2
/*----------------------------------------*/
.banner-style-two {
  position: relative;
  padding: 150px 0 70px 0;
}
@media only screen and (min-width: 576px) {
  .banner-style-two {
    padding: 250px 0 90px 0;
  }
}
@media only screen and (min-width: 992px) {
  .banner-style-two {
    padding: 200px 0 110px 0;
  }
}
.banner-style-two .banner-bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .banner-style-two .banner-bg-img {
    width: 0;
  }
}
@media only screen and (min-width: 992px) {
  .banner-style-two .banner-bg-img {
    width: 46%;
  }
}
.banner-style-two .banner-bg-img::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 1, 0.12);
}
.banner-style-two .banner-bg-shape {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
@media only screen and (min-width: 576px) {
  .banner-style-two .banner-bg-shape {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .banner-style-two .banner-bg-shape {
    width: 55%;
  }
}

.banner-video-btn {
  text-align: center;
  margin: 0;
}
@media only screen and (min-width: 576px) {
  .banner-video-btn {
    margin: 0 0 0 50px;
    text-align: start;
  }
}
@media only screen and (min-width: 768px) {
  .banner-video-btn {
    margin: -60px 0px 0px 100px;
    text-align: start;
  }
}
@media only screen and (min-width: 992px) {
  .banner-video-btn {
    margin: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-video-btn {
    margin: -60px 0px 0px 170px;
    text-align: start;
  }
}
@media only screen and (min-width: 1750px) {
  .banner-video-btn {
    margin: -60px 0px 0px 100px;
  }
}
.banner-video-btn .video-play-btn:hover {
  background-color: var(--bd-secondary);
}

.banner-two-content {
  position: relative;
}
.banner-two-content .seo-magnefic-icon {
  position: absolute;
  top: 300px;
  right: 0;
}
@media only screen and (min-width: 576px) {
  .banner-two-content .seo-magnefic-icon {
    top: 180px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-two-content .seo-magnefic-icon {
    top: 250px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-two-content .seo-magnefic-icon {
    top: 180px;
  }
}
.banner-two-content .banner-arrow-icon {
  position: absolute;
  right: 100px;
  top: 150px;
  width: 60px;
}
@media only screen and (min-width: 576px) {
  .banner-two-content .banner-arrow-icon {
    right: 230px;
    top: 190px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-two-content .banner-arrow-icon {
    right: 340px;
    top: 220px;
    width: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-two-content .banner-arrow-icon {
    right: 90px;
    top: 220px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-two-content .banner-arrow-icon {
    right: 170px;
    top: 230px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-two-content .banner-arrow-icon {
    right: 257px;
    top: 230px;
  }
}
.banner-two-content .banner-icon {
  position: absolute;
  top: 50px;
  right: 20px;
}
@media only screen and (min-width: 576px) {
  .banner-two-content .banner-icon {
    top: 0;
    right: 100px;
  }
}
.banner-two-content p {
  font-size: 20px;
  font-family: var(--bd-ff-kanit-sans);
  max-width: 400px;
}

.banner-sub-title {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;
  padding-left: 90px;
  font-family: var(--bd-ff-kanit-sans);
  max-width: 460px;
  letter-spacing: 2%;
}
.banner-sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  width: 70px;
  background-color: var(--bd-black);
}

.banner-two-title {
  font: 700 45px/1.01 var(--bd-ff-jakarta-sans);
  margin-bottom: 25px;
  max-width: 500px;
}
@media only screen and (min-width: 576px) {
  .banner-two-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-two-title {
    font-size: 75px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-two-title {
    font-size: 78px;
    max-width: 600px;
  }
}

.banner-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-ratting-box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.review-star {
  font-size: 20px;
  font-weight: 500;
  color: var(--bd-black);
  font-family: var(--bd-ff-kanit-sans);
}
.review-star span {
  color: #F63D34;
  font-size: 16px;
}

.ratting-content p {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.2;
}

.team-list {
  font-family: var(--bd-ff-kanit-sans);
}
.team-list ul {
  display: flex;
  margin-bottom: 8px;
}
.team-list ul li {
  background-color: #F4E3DB;
  margin-left: -15px;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: auto;
  border: 2px solid #DAB6A6;
}
.team-list ul li:first-child {
  margin-left: 0;
}
.team-list p {
  font-size: 15px;
  margin-bottom: 0;
  font-weight: 400;
}
.team-list .banner-team-count {
  font-size: 24px;
}

.arrow-icon {
  height: 40px;
  width: 65px;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid #DAB6A6;
  color: #DAB6A6;
  overflow: hidden;
  position: relative;
  margin-bottom: 25px;
}
.arrow-icon i {
  transform: rotate(45deg);
  transition: 0.5s;
}

/*----------------------------------------*/
/*  7.3 banner Style 3
/*----------------------------------------*/
.banner-style-three {
  padding: 150px 0px 30px 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.banner-circle-img {
  width: 250px;
  margin: auto;
  animation: rotate 65s linear infinite;
}
@media only screen and (min-width: 576px) {
  .banner-circle-img {
    width: 350px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-circle-img {
    width: 450px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-circle-img {
    width: 100%;
  }
}

.banner-three-left p {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-secondary);
  margin-bottom: 10px;
}
.banner-three-left .banner-date {
  font: 500 17px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
}

.social-link {
  margin-top: 40px;
}
@media only screen and (min-width: 576px) {
  .social-link {
    margin-top: 90px;
  }
}
.social-link ul {
  display: flex;
  gap: 20px;
}
.social-link ul li a {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-secondary);
}
.social-link ul li a:hover {
  color: var(--bd-primary);
}

.banner-three-container {
  max-width: 1740px;
}

.banner-three-right-content {
  padding-left: 0px;
}
@media only screen and (min-width: 992px) {
  .banner-three-right-content {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-three-right-content {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-three-right-content {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-three-right-content {
    padding-left: 50px;
  }
}
.banner-three-right-content p {
  font: 400 20px/1.57 var(--bd-ff-epilogue-sans);
  color: var(--bd-text-secondary);
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 0.5px solid var(--bd-text-secondary);
}
@media only screen and (min-width: 992px) {
  .banner-three-right-content p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-three-right-content p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-three-right-content p {
    font-size: 22px;
  }
}

.redesign-content span {
  font: 400 15px var(--bd-ff-kanit-sans);
  color: var(--bd-text-secondary);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) {
  .redesign-content span {
    font-size: 16px;
  }
}
.redesign-content div {
  font: 500 18px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
  text-transform: capitalize;
}
@media only screen and (min-width: 1200px) {
  .redesign-content div {
    font-size: 20px;
  }
}

.banner-three-wrapper {
  position: relative;
}

.title-top-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .title-top-content {
    display: none;
  }
}
.title-top-content span {
  font: 600 14px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 768px) {
  .title-top-content span {
    font-size: 20px;
  }
}
.title-top-content span i {
  transform: rotate(45deg);
}

.banner-three-title {
  font: 700 35px var(--bd-ff-epilogue-sans);
  letter-spacing: -2%;
  color: var(--bd-white);
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .banner-three-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-three-title {
    font-size: 75px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-three-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-three-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-three-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-three-title {
    font-size: 170px;
  }
}
@media only screen and (min-width: 1750px) {
  .banner-three-title {
    font-size: 190px;
  }
}

.title-wrapper {
  margin-top: 50px;
}
@media (max-width: 575px) {
  .title-wrapper {
    margin-top: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .title-wrapper {
    margin-top: -180px;
  }
}

.brand-slider-three .swiper-wrapper {
  transition-timing-function: linear;
}
.brand-slider-three .brand-img {
  text-align: center;
}
.brand-slider-three .brand-img:hover img {
  opacity: 0.6;
}

.brand-img:hover img {
  opacity: 0.6;
}

/*----------------------------------------*/
/*  7.4 banner Style 4
/*----------------------------------------*/
.banner-area-four {
  padding: 90px 0 100px 0;
}

.banner-title-wrapper {
  position: relative;
  padding-bottom: 440px;
}
@media only screen and (min-width: 576px) {
  .banner-title-wrapper {
    padding-bottom: 700px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-wrapper {
    padding-bottom: 950px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-wrapper {
    padding-bottom: 1050px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-wrapper {
    padding-bottom: 270px;
  }
}
.banner-title-wrapper .title-bottom {
  display: flex;
}
@media only screen and (min-width: 576px) {
  .banner-title-wrapper .title-bottom {
    top: 70px;
    right: 200px;
    position: absolute;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-wrapper .title-bottom {
    top: 70px;
    right: 290px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-wrapper .title-bottom {
    top: 115px;
    right: 230px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-wrapper .title-bottom {
    top: 150px;
    right: 150px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-title-wrapper .title-bottom {
    top: 230px;
    right: -80px;
  }
}
.banner-title-wrapper .title-right {
  font: 800 50px/1.1 var(--bd-ff-bebas-sans);
}
@media only screen and (min-width: 576px) {
  .banner-title-wrapper .title-right {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-wrapper .title-right {
    font-size: 76px;
    line-height: 1.3;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-wrapper .title-right {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-wrapper .title-right {
    font-size: 160px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-title-wrapper .title-right {
    font-size: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-title-wrapper .title-right {
    font-size: 280px;
  }
}

.banner-title-four.title-right.mix-blend-text {
  mix-blend-mode: color;
  z-index: 8;
}

.banner-main-wrapper {
  position: relative;
}
.banner-main-wrapper .banner-four-thumb {
  border-radius: 400px;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
}
@media only screen and (min-width: 576px) {
  .banner-main-wrapper .banner-four-thumb {
    left: 0px;
    max-width: 100%;
    max-height: 100%;
    top: 180px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-main-wrapper .banner-four-thumb {
    max-width: 800px;
    max-height: 800px;
    top: 230px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-main-wrapper .banner-four-thumb {
    left: -30px;
    top: 310px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-main-wrapper .banner-four-thumb {
    top: 160px;
    left: -468px;
    max-width: 700px;
    max-height: 700px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-main-wrapper .banner-four-thumb {
    top: 180px;
    left: 0px;
    margin: 0;
    max-width: 800px;
    max-height: 800px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-main-wrapper .banner-four-thumb {
    top: 230px;
    left: -35px;
  }
}
.banner-main-wrapper .banner-four-thumb::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--bd-tertiary);
  opacity: 0.5;
}

.banner-title-four-top {
  font: 500 50px var(--bd-ff-bebas-sans);
  display: inline-flex;
  align-items: center;
  mix-blend-mode: color;
  position: relative;
  z-index: 5;
}
@media only screen and (min-width: 576px) {
  .banner-title-four-top {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-four-top {
    font-size: 76px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-four-top {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-four-top {
    font-size: 160px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-title-four-top {
    font-size: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-title-four-top {
    font-size: 280px;
    margin-left: -80px;
  }
}
.banner-title-four-top .banner-small-text {
  font: 400 20px/1 var(--bd-ff-bebas-sans);
  max-width: 80px;
  margin-left: 20px;
  display: inline-block;
}
@media (max-width: 575px) {
  .banner-title-four-top .banner-small-text {
    max-width: 60px;
    margin-left: 5px;
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-four-top .banner-small-text {
    font-size: 26px;
    max-width: 90px;
    margin-left: 25px;
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-four-top .banner-small-text {
    font-size: 40px;
    max-width: 150px;
    margin-top: -30px;
  }
}

.banner-bottom-wrapper {
  max-width: 360px;
  margin: 0 0 0 auto;
}
@media only screen and (min-width: 576px) {
  .banner-bottom-wrapper {
    max-width: 100%;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-bottom-wrapper {
    max-width: 360px;
    margin: 0 0 0 auto;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-bottom-wrapper {
    max-width: 430px;
    margin: 0 0 0 auto;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-bottom-wrapper {
    max-width: 360px;
    margin: 0 0 0 auto;
  }
}
.banner-bottom-wrapper p {
  font: 400 20px var(--bd-ff-outfit-sans);
}

.banner-title-four.title-right span {
  mix-blend-mode: inherit !important;
}

.banner-bottom-single-inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media only screen and (min-width: 1200px) {
  .banner-bottom-single-inner {
    margin-bottom: 80px;
  }
}
.banner-bottom-single-inner ul li {
  background-color: #DADADA;
  border-color: var(--bd-white);
}
.banner-bottom-single-inner .team-list p {
  font: 400 17px var(--bd-ff-outfit-sans);
  margin-bottom: 8px;
}
.banner-bottom-single-inner .banner-team-count {
  font: 400 36px var(--bd-ff-bebas-sans);
}

.banner-contact {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .banner-contact {
    margin-top: 170px;
    align-items: start;
  }
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media only screen and (min-width: 576px) {
  .contact-wrapper {
    flex-direction: row;
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .contact-wrapper {
    gap: 80px;
  }
}
.contact-wrapper a {
  font: 400 18px var(--bd-ff-outfit-sans);
  display: inline-block;
  color: var(--bd-text-body);
}
.contact-wrapper a:hover {
  color: var(--bd-tertiary);
}

.share-icon ul {
  display: flex;
  gap: 25px;
}
.share-icon ul li a {
  color: var(--bd-text-body);
  font-size: 14px;
}
.share-icon ul li a:hover {
  color: var(--bd-tertiary);
}

.intro-video-icon {
  display: inline-flex;
  height: 60px;
  width: 60px;
  align-items: center;
  justify-content: center;
  background: var(--bd-white);
  border-radius: 50%;
  margin-bottom: 10px;
  font-size: 14px;
}
@media only screen and (min-width: 576px) {
  .intro-video-icon {
    margin-bottom: 20px;
  }
}
.intro-video-icon:hover {
  background-color: var(--bd-tertiary);
  color: var(--bd-white);
}

.video-intro-inner {
  background-color: var(--bd-black);
  height: 180px;
  width: 180px;
  padding: 15px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
}
@media only screen and (min-width: 576px) {
  .video-intro-inner {
    height: 250px;
    width: 250px;
    padding: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .video-intro-inner {
    height: 350px;
    width: 350px;
    padding: 40px;
  }
}
.video-intro-inner h4 {
  font: 500 20px var(--bd-ff-outfit-sans);
  color: var(--bd-white);
  margin-top: 5px;
}
@media only screen and (min-width: 576px) {
  .video-intro-inner h4 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 768px) {
  .video-intro-inner h4 {
    margin-top: 15px;
    font-size: 28px;
  }
}

.banner-video {
  max-width: 37vw;
  max-height: 125px;
  height: 100%;
  border-radius: 100px;
}
@media only screen and (min-width: 576px) {
  .banner-video {
    max-width: 30vw;
  }
}
@media only screen and (min-width: 768px) {
  .banner-video {
    max-width: 50vw;
  }
}

.border-shape-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .border-shape-img {
    width: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .border-shape-img {
    width: 300px;
  }
}
@media only screen and (min-width: 1400px) {
  .border-shape-img {
    width: 360px;
  }
}
@media only screen and (min-width: 1750px) {
  .border-shape-img {
    width: inherit;
  }
}

.home-four-arrow-icon {
  border-color: var(--bd-text-secondary);
  color: var(--bd-text-secondary);
}

.video-thumb {
  position: relative;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 100px;
  max-height: 78px;
}
@media only screen and (min-width: 576px) {
  .video-thumb {
    max-height: 99px;
  }
}
@media only screen and (min-width: 768px) {
  .video-thumb {
    max-height: 125px;
  }
}
.video-thumb::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.3;
}
.video-thumb .intro-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45px;
  width: 45px;
}

/*----------------------------------------*/
/*  5.2 Main menu css
/*----------------------------------------*/
.main-menu ul {
  display: flex;
  gap: 40px;
}
@media only screen and (min-width: 992px) {
  .main-menu ul {
    gap: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .main-menu ul {
    gap: 40px;
  }
}
.main-menu ul > li {
  position: relative;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
.main-menu ul > li:hover a {
  color: var(--bd-primary);
}
.main-menu ul > li:hover::before {
  color: var(--bd-primary);
  transform: translateY(-50%) rotate(180deg);
}
.main-menu ul > li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  left: 0;
  pointer-events: all;
}
.main-menu ul > li > .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 15px;
  min-width: 220px;
  padding: 15px 0px;
  background: var(--bd-white);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s;
  z-index: 22;
}
.main-menu ul > li > .sub-menu > li {
  padding: 5px 20px 5px 20px;
}
.main-menu ul > li > .sub-menu > li:hover > a {
  color: var(--bd-primary);
  padding-inline-start: 10px;
  background: transparent;
}
.main-menu ul > li > .sub-menu > li a {
  padding: 4px 0;
  transition: all 300ms linear 0s;
  white-space: nowrap;
  display: block;
  border: 0;
  color: var(--bd-black);
}
.main-menu ul > li > .sub-menu > li .sub-menu {
  left: 100%;
  top: 10px;
}
.main-menu ul > li > a {
  font-size: 16px;
  font-weight: 500;
  padding: 33px 0px;
  display: inline-block;
  padding-inline-start: 0px;
  text-transform: capitalize;
  position: relative;
}
.main-menu ul > li > a:hover {
  color: var(--bd-primary);
}
.main-menu ul li.has-mega-menu {
  position: static;
  /* mega menu start */
}
.main-menu ul li.has-mega-menu:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  top: 100%;
  pointer-events: all;
}
.main-menu ul li.has-mega-menu .mega-menu {
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 30px 35px 30px;
  background: var(--bd-white);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  max-width: 1290px;
  pointer-events: none;
  transition: all ease 0.4s;
}
@media only screen and (min-width: 992px) {
  .main-menu ul li.has-mega-menu .mega-menu {
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .main-menu ul li.has-mega-menu .mega-menu {
    padding: 30px 35px 30px;
  }
}

.main-menu.menu-style-five ul li a {
  font: 500 16px var(--bd-ff-jakarta-sans);
}

.menu-title {
  text-align: center;
  color: var(--bd-black);
  margin-bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .menu-title {
    font-size: 20px;
    font-weight: 500;
  }
}
.menu-title a {
  color: var(--bd-black) !important;
}

.menu-item {
  position: relative;
  border: 3px solid transparent;
  border-radius: 7px;
  overflow: hidden;
  padding: 10px;
  transition: 0.4s;
  background: #f2f2f2;
}
.menu-item:hover {
  border-color: var(--bd-primary);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.menu-item:hover .menu-thumb img {
  transform: scale(1.05);
}

.menu-item.active {
  border-color: var(--bd-primary);
}

.menu-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  height: 150px;
}
@media only screen and (min-width: 992px) {
  .menu-thumb {
    height: inherit;
  }
}
.menu-thumb img {
  width: 100%;
  object-fit: cover;
}

.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  column-gap: 15px;
  row-gap: 15px;
  padding: 20px;
}
@media only screen and (min-width: 992px) {
  .home-menu-grid {
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .home-menu-grid {
    column-gap: 30px;
    row-gap: 30px;
  }
}

.header-style-two .main-menu ul > li:hover > a {
  color: var(--bd-secondary);
}
.header-style-two .main-menu ul > li a {
  font: 400 17px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
.header-style-two .main-menu ul > li .sub-menu li:hover > a {
  color: var(--bd-secondary);
}
.header-style-two .main-menu ul > li .sub-menu li .sub-menu li:hover > a {
  color: var(--bd-secondary);
}
.header-style-two .menu-item:hover {
  border-color: var(--bd-secondary);
}

/*----------------------------------------*/
/*  5.1 Meanmenu css
/*----------------------------------------*/
/* Mean menu customize */
.mean-container a.meanmenu-reveal {
  width: 22px;
  height: 22px;
  padding: 13px 13px 11px 13px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  text-indent: -9999em;
  line-height: 22px;
  font-size: 1px;
  font-weight: 700;
  display: none !important;
}
.mean-container a.meanmenu-reveal span {
  display: block;
  background: #fff;
  height: 3px;
  margin-top: 3px;
}
.mean-container .mean-push {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  clear: both;
}
.mean-container .mean-nav {
  background: none;
  margin-top: 0;
  float: left;
  width: 100%;
  margin-bottom: 30px;
}
.mean-container .mean-nav .wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}
.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}
.mean-container .mean-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
}
.mean-container .mean-nav ul li {
  position: relative;
  float: left;
  width: 100%;
  border-top: 1px solid #363535;
}
.mean-container .mean-nav ul li:first-child {
  border-top: 0 !important;
}
.mean-container .mean-nav ul li.dropdown-opened > a, .mean-container .mean-nav ul li.dropdown-opened > span {
  color: var(--bd-primary);
}
.mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked i, .mean-container .mean-nav ul li.dropdown-opened > span.mean-expand.mean-clicked i {
  transform: rotate(180deg);
}
.mean-container .mean-nav ul li.mean-last {
  border-bottom: none;
  margin-bottom: 0;
}
.mean-container .mean-nav ul li > a:hover {
  color: var(--bd-primary);
}
.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
  transition: 0.3s;
  font-weight: 300;
}
.mean-container .mean-nav ul li > a > i {
  display: none;
}
.mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span {
  display: block;
  float: left;
  width: 90%;
  padding: 10px 5%;
  margin: 0;
  text-align: left;
  text-decoration: none;
  text-transform: capitalize;
  width: 100%;
  padding: 16px 0;
  color: var(--bd-white);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
@media (max-width: 575px) {
  .mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span {
    padding: 10px 0;
  }
}
.mean-container .mean-nav ul li a.mean-expand, .mean-container .mean-nav ul li span.mean-expand {
  text-align: center;
  position: absolute;
  right: 0;
  top: 13px;
  z-index: 2;
  background: transparent;
  border: none !important;
  font-size: 14px;
  padding: 0 !important;
  height: 30px;
  width: 30px;
  color: var(--bd-white);
  line-height: 30px;
  font-weight: 400;
}
@media (max-width: 575px) {
  .mean-container .mean-nav ul li a.mean-expand, .mean-container .mean-nav ul li span.mean-expand {
    top: 8px;
  }
}
.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--bd-border-primary) !important;
}
.mean-container .mean-nav ul li li a {
  width: 90%;
  padding: 10px 7%;
  text-shadow: none !important;
  visibility: visible;
  position: relative;
  font-size: 15px;
  font-weight: 400;
}
.mean-container .mean-nav ul li li a:hover::before {
  background-color: var(--bd-primary);
}
.mean-container .mean-nav ul li li a::before {
  position: absolute;
  height: 1px;
  width: 10px;
  background-color: var(--bd-white);
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}
.mean-container .mean-nav ul li li li a {
  width: 80%;
  padding: 10px 12%;
}
.mean-container .mean-nav ul li li li li a {
  width: 70%;
  padding: 10px 17%;
}
.mean-container .mean-nav ul li li li li li a {
  width: 60%;
  padding: 10px 20%;
}
.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
  float: left;
  width: 100%;
  position: relative;
  padding: 4px 0;
  min-height: 42px;
  z-index: 999999;
}
@media (max-width: 575px) {
  .mean-container .mean-bar {
    width: 100%;
  }
}
.mean-container .mean-bar, .mean-container .mean-bar * {
  /* Fix for box sizing on Foundation Framework etc. */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
.footer-area {
  background-color: var(--bd-black);
  position: relative;
  overflow: hidden;
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) {
  .footer-area {
    padding-bottom: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-area {
    padding-bottom: 250px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area {
    padding-bottom: 290px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-area {
    padding-bottom: 420px;
  }
}
.footer-area .footer-logo {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 320px;
  margin: auto;
  bottom: -15px;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .footer-area .footer-logo {
    max-width: 500px;
    bottom: -70px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-area .footer-logo {
    bottom: -80px;
    max-width: 650px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-area .footer-logo {
    bottom: -100px;
    max-width: 900px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area .footer-logo {
    bottom: -130px;
    max-width: 1100px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area .footer-logo {
    max-width: 100%;
  }
}

.footer-top {
  padding-bottom: 80px;
  border-bottom: 1px solid #292929;
}
@media (max-width: 575px) {
  .footer-top {
    padding-bottom: 35px;
  }
}

.footer-contact-title {
  font-size: 28px;
  font-weight: 400;
  color: #A4A4A4;
  letter-spacing: -2%;
  line-height: 1.45;
}
@media only screen and (min-width: 576px) {
  .footer-contact-title {
    font-size: 55px;
    line-height: 1.1;
  }
}
@media only screen and (min-width: 768px) {
  .footer-contact-title {
    font-size: 60px;
    padding-right: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-contact-title {
    padding-right: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-contact-title {
    font-size: 80px;
    padding-right: 0;
  }
}
.footer-contact-title span {
  color: var(--bd-white);
  font-weight: 600;
}
.footer-contact-title .theme-btn {
  display: inline-flex;
}
@media only screen and (min-width: 576px) {
  .footer-contact-title .theme-btn {
    transform: translateY(-8px);
  }
}
@media only screen and (min-width: 768px) {
  .footer-contact-title .theme-btn {
    transform: translateY(-10px);
  }
}
@media only screen and (min-width: 1200px) {
  .footer-contact-title .theme-btn {
    transform: translateY(-15px);
  }
}
.footer-contact-title .theme-btn .icon-box {
  border-color: var(--bd-black);
}
.footer-contact-title .theme-btn .icon-box i {
  font-size: 16px;
}
@media (max-width: 575px) {
  .footer-contact-title .theme-btn .text-content {
    font-size: 15px;
  }
}

.footer-contact {
  text-align: start;
}
@media only screen and (min-width: 992px) {
  .footer-contact {
    text-align: end;
  }
}

.footer-location {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 25px;
}
.footer-location p {
  color: var(--bd-white);
  margin-bottom: 0px;
}
.footer-location span {
  display: block;
  color: #A4A4A4;
}

.footer-call-number a {
  color: var(--bd-white);
  font-size: 18px;
  font-weight: 600;
}
.footer-call-number a:hover {
  color: var(--bd-primary);
}

.footer-mail a {
  color: #A4A4A4;
  font-size: 16px;
  font-weight: 400;
}
.footer-mail a:hover {
  color: var(--bd-primary);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  gap: 15px 20px;
  padding: 32px 0px;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .footer-bottom-inner {
    justify-content: space-between;
    flex-direction: row;
  }
}

.footer-copyright-text p {
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-text-secondary);
  margin-bottom: 0;
}

.footer-menu-link ul {
  display: flex;
  gap: 10px;
}
@media only screen and (min-width: 576px) {
  .footer-menu-link ul {
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-menu-link ul {
    gap: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-menu-link ul {
    gap: 60px;
  }
}
.footer-menu-link ul li a {
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-text-secondary);
}
@media (max-width: 575px) {
  .footer-menu-link ul li a {
    font-size: 14px;
  }
}
.footer-menu-link ul li a:hover {
  color: var(--bd-primary);
}

/*----------------------------------------*/
/*  6.2 Footer Style 2
/*----------------------------------------*/
.footer-two-area {
  border-top: 1px solid #ECECEC;
}

.footer-two-contact-title {
  font: 400 30px var(--bd-ff-jakarta-sans);
  color: #A4A4A4;
}
@media only screen and (min-width: 576px) {
  .footer-two-contact-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-two-contact-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-two-contact-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-two-contact-title {
    font-size: 90px;
  }
}
.footer-two-contact-title span {
  color: var(--bd-black);
  font-weight: 600;
}
.footer-two-contact-title .theme-btn {
  display: inline-flex;
  transform: translateY(-3px);
}
@media only screen and (min-width: 768px) {
  .footer-two-contact-title .theme-btn {
    transform: translateY(-10px);
  }
}
@media only screen and (min-width: 992px) {
  .footer-two-contact-title .theme-btn {
    transform: translateY(-14px);
  }
}
@media only screen and (min-width: 1200px) {
  .footer-two-contact-title .theme-btn {
    transform: translateY(-20px);
  }
}
.footer-two-contact-title .theme-btn .icon-box {
  background-color: var(--bd-secondary);
}
.footer-two-contact-title .theme-btn .icon-box i {
  font-size: 16px;
}
.footer-two-contact-title .theme-btn .text-content {
  background-color: var(--bd-secondary);
}
@media (max-width: 575px) {
  .footer-two-contact-title .theme-btn .text-content {
    font-size: 15px;
  }
}

.footer-two-mid {
  padding-bottom: 60px;
}
@media only screen and (min-width: 576px) {
  .footer-two-mid {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-two-mid {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-two-mid {
    padding-bottom: 100px;
  }
}

.footer-widget-title {
  font: 600 20px var(--bd-ff-jakarta-sans);
  margin-bottom: 20px;
}

@media only screen and (min-width: 576px) {
  .footer-social-link ul {
    column-count: 2;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-social-link ul {
    width: 65%;
  }
}
.footer-social-link ul li {
  margin-bottom: 15px;
}
.footer-social-link ul li a {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
.footer-social-link ul li a:hover {
  color: var(--bd-secondary);
}
.footer-social-link ul li a:hover .arrow-first {
  transform: rotate(-45deg) translate(40px);
}
.footer-social-link ul li a:hover .arrow-second {
  transform: rotate(-45deg) translate(0px);
  color: var(--bd-secondary);
}
.footer-social-link ul li a span {
  position: relative;
  overflow: hidden;
  display: inline-flex;
}
.footer-social-link ul li a span i {
  transform: rotate(-45deg);
  transition: 0.3s;
}
.footer-social-link ul li a span i.arrow-second {
  position: absolute;
  transform: rotate(-45deg) translate(-40px);
  left: 0;
}

.footer-link ul li {
  margin-bottom: 15px;
}
.footer-link ul li a {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  display: inline-block;
  position: relative;
}
.footer-link ul li a:hover::before {
  left: 0;
  right: auto;
  width: 100%;
}
.footer-link ul li a::before {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  height: 1px;
  width: 0;
  background: var(--bd-secondary);
  content: "";
  transition: 0.3s;
}

.footer-two-top {
  padding: 60px 0;
}
@media only screen and (min-width: 576px) {
  .footer-two-top {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 768px) {
  .footer-two-top {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 992px) {
  .footer-two-top {
    padding: 100px 0;
  }
}

@media only screen and (min-width: 1600px) {
  .footer-widget-two {
    padding-left: 80px;
  }
}

@media only screen and (min-width: 1600px) {
  .footer-widget-three {
    padding-left: 140px;
  }
}

@media only screen and (min-width: 1600px) {
  .footer-widget-four {
    padding-left: 120px;
  }
}

.footer-two-copy-rigth-text p {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
  margin-bottom: 0px;
}
@media (max-width: 575px) {
  .footer-two-copy-rigth-text p {
    font-size: 15px;
  }
}

.footer-menu-link.footer-menu-two ul li a {
  font: 400 15px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .footer-menu-link.footer-menu-two ul li a {
    font-size: 18px;
  }
}
.footer-menu-link.footer-menu-two ul li a:hover {
  color: var(--bd-secondary);
}

.footer-bottom-two {
  border-top: 1px solid #ECECEC;
}

.footer-two-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0px;
  flex-direction: column;
  gap: 15px;
}
@media only screen and (min-width: 992px) {
  .footer-two-bottom-inner {
    flex-direction: row;
  }
}

/*----------------------------------------*/
/*  6.3 Footer Style 3
/*----------------------------------------*/
.footer-three-area {
  background-color: var(--bd-black);
  position: relative;
  z-index: 2;
  padding-bottom: 80px;
}
@media only screen and (min-width: 576px) {
  .footer-three-area {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-three-area {
    padding-bottom: 140px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-three-area {
    padding-bottom: 160px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-three-area {
    padding-bottom: 180px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-three-area {
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-three-area {
    padding-bottom: 240px;
  }
}
.footer-three-area .footer-top {
  padding-bottom: 60px;
}
.footer-three-area .footer-large-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: -15px;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .footer-three-area .footer-large-text {
    bottom: -30px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-three-area .footer-large-text {
    bottom: -40px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-three-area .footer-large-text {
    bottom: -50px;
  }
}
@media only screen and (min-width: 1750px) {
  .footer-three-area .footer-large-text {
    bottom: -80px;
  }
}

.footer-img-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 576px) {
  .footer-img-content {
    padding: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-img-content {
    padding: 15px;
  }
}
.footer-img-content h5 {
  font: 500 18px var(--bd-ff-epilogue-sans);
  max-width: 200px;
}

@media only screen and (min-width: 1200px) {
  .footer-three-right {
    padding-left: 100px;
  }
}

.footer-btn a {
  font: 500 14px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
  display: inline-block;
  border-radius: 20px;
  padding: 12px 25px;
  background-color: var(--bd-black);
}
.footer-btn a:hover {
  color: var(--bd-black);
  background-color: var(--bd-primary);
}

.footer-thumb-wrapper {
  padding: 5px;
  background-color: var(--bd-white);
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
}
.footer-thumb-wrapper:hover .footer-img img {
  transform: scale(1.06);
}

.footer-img {
  overflow: hidden;
  border-radius: 15px;
  flex: 0 0 auto;
  width: 150px;
}
@media only screen and (min-width: 576px) {
  .footer-img {
    width: 200px;
  }
}
.footer-img img {
  width: 100%;
}

.footer-logo-content {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .footer-logo-content {
    text-align: start;
    max-width: 370px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-logo-content {
    max-width: 260px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-logo-content {
    max-width: 370px;
  }
}
.footer-logo-content .footer-logo {
  margin-bottom: 30px;
}
.footer-logo-content p {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: #A4A4A4;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .footer-logo-content p {
    margin-bottom: 30px;
  }
}
.footer-logo-content ul {
  display: flex;
  gap: 10px;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .footer-logo-content ul {
    gap: 15px;
    justify-content: start;
  }
}
@media only screen and (min-width: 768px) {
  .footer-logo-content ul {
    gap: 30px;
  }
}
.footer-logo-content ul li a {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: #A4A4A4;
}
.footer-logo-content ul li a:hover {
  color: var(--bd-white);
}

.footer-three-bottom {
  padding-top: 60px;
}

.footer-style-three-widget .widget-title {
  font: 600 20px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .footer-style-three-widget .widget-title {
    font-size: 18px;
  }
}

.footer-style-three-link ul li {
  margin-bottom: 15px;
}
.footer-style-three-link ul li a {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: #A4A4A4;
  position: relative;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .footer-style-three-link ul li a {
    font-size: 18px;
  }
}
.footer-style-three-link ul li a:hover::before {
  left: 0;
  right: auto;
  width: 100%;
}
.footer-style-three-link ul li a::before {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  height: 1px;
  width: 0;
  background: var(--bd-primary);
  content: "";
  transition: 0.3s;
}

@media only screen and (min-width: 1400px) {
  .widget-four {
    padding-left: 50px;
  }
}

.footer-large-text {
  background: linear-gradient(0deg, #121212 -115.63%, #3A3A3A 133.25%, #B0B0B0 358.97%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font: 400 50px var(--bd-ff-epilogue-sans);
  letter-spacing: -5%;
}
@media only screen and (min-width: 576px) {
  .footer-large-text {
    font-size: 78px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-large-text {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-large-text {
    font-size: 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-large-text {
    font-size: 155px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-large-text {
    font-size: 185px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-large-text {
    font-size: 210px;
  }
}
@media only screen and (min-width: 1750px) {
  .footer-large-text {
    font-size: 250px;
  }
}

.footer-three-contact-title {
  font-family: var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .footer-three-contact-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-three-contact-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-three-contact-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-three-contact-title {
    font-size: 80px;
  }
}
.footer-three-contact-title .text-content {
  line-height: 1.29;
}

/*----------------------------------------*/
/*  6.4 Footer Style 4
/*----------------------------------------*/
.footer-four-area {
  background-color: var(--bd-black);
}

.footer-custom-container {
  max-width: 1600px;
}

.height-title .hero-title span {
  box-sizing: border-box;
  display: inline-block;
  transform-origin: bottom center;
}

.footer-four-contact {
  font: 400 80px/1.1 var(--bd-ff-bebas-sans);
  letter-spacing: -2%;
  color: var(--bd-white);
  text-align: center;
  margin-bottom: 60px;
}
@media only screen and (min-width: 576px) {
  .footer-four-contact {
    font-size: 130px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-four-contact {
    font-size: 190px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-four-contact {
    font-size: 280px;
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-four-contact {
    font-size: 330px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-four-contact {
    font-size: 400px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-four-contact {
    font-size: 480px;
  }
}
.footer-four-contact div {
  display: inline-block;
}
.footer-four-contact div:first-child {
  margin-right: 45px;
}

.inner {
  position: relative;
}
.inner .footer-contact-btn {
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font: 400 12px var(--bd-ff-outfit-sans);
  background-color: var(--bd-primary);
}
@media only screen and (min-width: 576px) {
  .inner .footer-contact-btn {
    height: 110px;
    width: 110px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .inner .footer-contact-btn {
    height: 140px;
    width: 140px;
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .inner .footer-contact-btn {
    height: 180px;
    width: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .inner .footer-contact-btn {
    height: 220px;
    width: 220px;
  }
}

.footer-common-widget {
  padding-right: 50px;
}
@media only screen and (min-width: 992px) {
  .footer-common-widget {
    padding-right: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-common-widget {
    padding-right: 50px;
  }
}
.footer-common-widget p {
  font: 400 18px var(--bd-ff-outfit-sans);
  color: #A4A4A4;
  margin-bottom: 0;
}

.common-widget-title {
  font: 400 24px var(--bd-ff-bebas-sans);
  color: var(--bd-white);
  margin-bottom: 5px;
}
@media only screen and (min-width: 576px) {
  .common-widget-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .common-widget-title {
    font-size: 48px;
    margin-bottom: 15px;
  }
}

.footer-menu-link.common-footer-menu-link ul li a {
  color: #A4A4A4;
  font: 400 16px var(--bd-ff-outfit-sans);
}
.footer-menu-link.common-footer-menu-link ul li a:hover {
  color: var(--bd-tertiary);
}

.common-copy-rigth-text p {
  color: #A4A4A4;
  margin-bottom: 0;
  font: 400 16px var(--bd-ff-outfit-sans);
}
.common-copy-rigth-text p span {
  color: var(--bd-white);
}

.footer-botom-style-four {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .footer-botom-style-four {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-four-bottom {
  padding: 35px 0px;
  border-top: 1px solid #292929;
}

.footer-input-field input {
  height: 40px;
  padding: 0 25px;
  background-color: transparent;
  border-bottom: 2px solid var(--bd-text-body);
  color: var(--bd-white);
  font: 500 24px var(--bd-ff-jakarta-sans);
  padding: 0;
}
.footer-input-field input::placeholder {
  color: #A4A4A4;
  font: 500 20px var(--bd-ff-jakarta-sans);
  letter-spacing: 5%;
}
.footer-input-field input::-moz-placeholder {
  color: #A4A4A4;
  font: 500 20px var(--bd-ff-jakarta-sans);
  letter-spacing: 5%;
}
@media only screen and (min-width: 768px) {
  .footer-input-field input {
    font-size: 30px;
  }
}

.footer-input-field-four input {
  font: 500 20px var(--bd-ff-outfit-sans);
  letter-spacing: 2%;
}
.footer-input-field-four input:focus {
  border-color: var(--bd-tertiary);
}
.footer-input-field-four input::placeholder {
  color: #A4A4A4;
  font: 500 20px var(--bd-ff-outfit-sans);
  letter-spacing: 5%;
}
.footer-input-field-four input::-moz-placeholder {
  color: #A4A4A4;
  font: 500 20px var(--bd-ff-outfit-sans);
  letter-spacing: 5%;
}

.footer-input-title {
  font: 400 20px/1 var(--bd-ff-bebas-sans);
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .footer-input-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-input-title {
    font-size: 48px;
  }
}

.footer-input-top {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .footer-input-top {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-input-top {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-input-top {
    margin-bottom: 35px;
  }
}
.footer-input-top button {
  font-size: 30px;
  line-height: 1;
  color: var(--bd-white);
}
@media only screen and (min-width: 768px) {
  .footer-input-top button {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-input-top button {
    font-size: 30px;
    margin-top: -5px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-input-top button {
    font-size: 40px;
  }
}

.footer-input-wrapper {
  padding-left: 0px;
}
@media only screen and (min-width: 992px) {
  .footer-input-wrapper {
    padding-left: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-input-wrapper {
    padding-left: 100px;
  }
}

.footer-style-five-area {
  background-color: var(--bd-black);
}
.footer-style-five-area .footer-four-contact {
  font: 600 50px var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 224px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 260px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-style-five-area .footer-four-contact {
    font-size: 300px;
  }
}
.footer-style-five-area .inner .footer-contact-btn {
  font: 400 14px var(--bd-ff-kanit-sans);
  height: 70px;
  width: 70px;
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .inner .footer-contact-btn {
    height: 100px;
    width: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-style-five-area .inner .footer-contact-btn {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-style-five-area .inner .footer-contact-btn {
    height: 150px;
    width: 150px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-style-five-area .inner .footer-contact-btn {
    height: 180px;
    width: 180px;
  }
}
.footer-style-five-area .footer-custom-container {
  max-width: 1670px;
}
.footer-style-five-area .common-widget-title {
  font: 500 18px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .common-widget-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-style-five-area .common-widget-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-style-five-area .common-widget-title {
    font-size: 40px;
  }
}
.footer-style-five-area .footer-common-widget p {
  font: 400 18px var(--bd-ff-kanit-sans);
}
@media (max-width: 575px) {
  .footer-style-five-area .footer-common-widget p {
    font-size: 16px;
  }
}
.footer-style-five-area .footer-input-title {
  font: 500 20px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .footer-input-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-style-five-area .footer-input-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-style-five-area .footer-input-title {
    font-size: 40px;
  }
}
.footer-style-five-area .footer-menu-link ul li a {
  font: 400 14px var(--bd-ff-kanit-sans);
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .footer-menu-link ul li a {
    font-size: 16px;
  }
}
.footer-style-five-area .footer-menu-link ul li a:hover {
  color: var(--bd-white);
}
.footer-style-five-area .common-copy-rigth-text p {
  font: 400 14px var(--bd-ff-kanit-sans);
}
@media only screen and (min-width: 576px) {
  .footer-style-five-area .common-copy-rigth-text p {
    font-size: 16px;
  }
}

.footer-contact-btn.footer-contact-four {
  background-color: var(--bd-tertiary);
  color: var(--bd-white);
}

/*----------------------------------------*/
/*  8.1 About css
/*----------------------------------------*/
.feature-area .feature-content {
  max-width: 620px;
}
@media only screen and (min-width: 576px) {
  .feature-area .feature-content {
    max-width: 320px;
  }
}
@media only screen and (min-width: 768px) {
  .feature-area .feature-content {
    max-width: 390px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-area .feature-content {
    max-width: 620px;
  }
}
@media only screen and (min-width: 768px) {
  .feature-area .section-top-content {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-area .section-top-content {
    margin-bottom: inherit;
  }
}

.feature-text {
  margin-left: 0px;
}
@media only screen and (min-width: 992px) {
  .feature-text {
    margin-left: 30px;
    margin-top: 60px;
  }
}

.case-study-title-inner .section-title-two {
  max-width: 400px;
}

.case-study-single-inner {
  background-color: var(--bd-bg-secondary);
  padding: 15px;
  position: relative;
  min-height: 420px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) {
  .case-study-single-inner {
    padding: 20px;
    min-height: 450px;
  }
}
@media only screen and (min-width: 992px) {
  .case-study-single-inner {
    padding: 40px;
    min-height: 550px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study-single-inner {
    padding: 40px;
    min-height: 450px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-study-single-inner {
    padding: 40px;
    min-height: 550px;
  }
}
@media only screen and (min-width: 576px) {
  .case-study-single-inner:hover .case-study-content {
    bottom: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .case-study-single-inner:hover .case-study-content {
    bottom: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study-single-inner:hover .case-study-content {
    bottom: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-study-single-inner:hover .case-study-content {
    bottom: 40px;
  }
}
.case-study-single-inner:hover .case-study-content h5 {
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .case-study-single-inner:hover .case-study-content h5 {
    margin-bottom: 0;
  }
}
.case-study-single-inner span {
  font: 600 60px var(--bd-ff-jakarta-sans);
  display: inline-block;
  color: var(--bd-bg-secondary);
  text-shadow: 1px 0 0 #D9C9C1, 0 1px 0 #D9C9C1, -1px 0 0 #D9C9C1, 0 -1px 0 #D9C9C1;
}
@media only screen and (min-width: 992px) {
  .case-study-single-inner span {
    font-size: 64px;
  }
}
.case-study-single-inner .case-study-bg-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 55%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width: 576px) {
  .case-study-single-inner .case-study-bg-img {
    width: 45%;
  }
}
@media only screen and (min-width: 768px) {
  .case-study-single-inner .case-study-bg-img {
    width: 40%;
  }
}
@media only screen and (min-width: 992px) {
  .case-study-single-inner .case-study-bg-img {
    width: 45%;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study-single-inner .case-study-bg-img {
    width: 35%;
  }
}
@media only screen and (min-width: 1400px) {
  .case-study-single-inner .case-study-bg-img {
    width: 45%;
  }
}
.case-study-single-inner .case-study-bg-img::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(18, 18, 18, 0.35);
}
.case-study-single-inner .circle-btn {
  background-color: var(--bd-secondary);
  border-color: var(--bd-secondary);
}
@media (max-width: 575px) {
  .case-study-single-inner .circle-btn {
    display: none;
  }
}
.case-study-single-inner .circle-btn i {
  transform: rotate(-45deg);
}
.case-study-single-inner .circle-btn:hover i {
  transform: rotate(0deg);
}

.case-study-content {
  max-width: 200px;
  position: absolute;
  left: 15px;
  bottom: -227px;
  transition: 0.55s;
}
@media (max-width: 575px) {
  .case-study-content {
    bottom: 15px;
  }
}
@media only screen and (min-width: 576px) {
  .case-study-content {
    left: 20px;
    max-width: 250px;
  }
}
@media only screen and (min-width: 768px) {
  .case-study-content {
    left: 20px;
    max-width: 150px;
    bottom: -250px;
  }
}
@media only screen and (min-width: 992px) {
  .case-study-content {
    left: 40px;
    max-width: 200px;
    bottom: -227px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study-content {
    left: 20px;
    max-width: 200px;
    bottom: -227px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-study-content {
    left: 40px;
    max-width: 200px;
    bottom: -227px;
  }
}
.case-study-content h5 {
  margin-bottom: 35px;
  max-width: inherit;
  font-size: 26px;
  font-family: var(--bd-ff-jakarta-sans);
}
@media (max-width: 575px) {
  .case-study-content h5 {
    writing-mode: vertical-lr;
    transform: scale(-1);
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 576px) {
  .case-study-content h5 {
    max-width: inherit;
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .case-study-content h5 {
    max-width: 150px;
  }
}
.case-study-content p {
  font: 400 17px var(--bd-ff-kanit-sans);
  margin-bottom: 50px;
}
@media (max-width: 575px) {
  .case-study-content p {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .case-study-content p {
    font-size: 16px;
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .case-study-content p {
    font-size: 17px;
  }
}

.case-study-slider {
  margin-right: 0px;
}
@media only screen and (min-width: 576px) {
  .case-study-slider {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study-slider {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-study-slider {
    margin-right: -310px;
  }
}

.cursor {
  position: fixed;
  left: 0;
  pointer-events: none;
  font: 500 16px var(--bd-ff-jakarta-sans);
  line-height: 23px;
  color: var(--bd-white);
  background: var(--bd-black);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  letter-spacing: 5%;
  height: 100px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s;
  mix-blend-mode: hard-light;
}
.cursor::before {
  position: absolute;
  right: 16px;
  top: 52%;
  transform: translateY(-50%);
  content: "\f105";
  font-family: var(--bd-ff-fontawesome);
  font-size: 18px;
  font-weight: 300;
}
.cursor::after {
  position: absolute;
  left: 16px;
  top: 52%;
  transform: translateY(-50%);
  content: "\f104";
  font-family: var(--bd-ff-fontawesome);
  font-size: 18px;
  font-weight: 300;
}

.client-satesfied {
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
}
.client-satesfied::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #E5E5E5;
  bottom: 0;
}
@media only screen and (min-width: 576px) {
  .client-satesfied::before {
    width: 70%;
  }
}
@media only screen and (min-width: 992px) {
  .client-satesfied::before {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .client-satesfied {
    justify-content: center;
  }
}
@media only screen and (min-width: 1200px) {
  .client-satesfied {
    margin-left: 100px;
  }
}
.client-satesfied .client-single-item .project-bg {
  height: 170px;
  width: 118px;
  display: inline-flex;
  align-items: end;
  text-align: center;
  padding: 20px;
  background-color: var(--bd-transparent-color);
}
.client-satesfied .client-single-item .project-bg p {
  font: 500 14px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
  margin-bottom: 0;
}
.client-satesfied .client-single-item h2 {
  font: 600 32px var(--bd-ff-epilogue-sans);
  text-align: center;
  margin-bottom: 5px;
}
.client-satesfied .client-project-complete .project-bg {
  height: 220px;
}
.client-satesfied .client-project-complete .project-bg p {
  color: var(--bd-black);
}

.single-img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 5px solid var(--bd-white);
  overflow: hidden;
  margin-left: -70px;
}
@media only screen and (min-width: 576px) {
  .single-img {
    height: 250px;
    width: 250px;
    margin-left: -100px;
  }
}
@media only screen and (min-width: 768px) {
  .single-img {
    height: 320px;
    width: 320px;
    border: 8px solid var(--bd-white);
    margin-left: -130px;
  }
}
@media only screen and (min-width: 992px) {
  .single-img {
    height: 420px;
    width: 420px;
    border: 10px solid var(--bd-white);
    margin-left: -180px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-img {
    height: 520px;
    border: 14px solid var(--bd-white);
    width: 520px;
  }
}
.single-img:first-child {
  margin-left: 0;
}
.single-img img {
  width: 100%;
  height: 100%;
}

.about-single-bg {
  background-color: var(--bd-black);
  display: flex;
  align-items: center;
}
.about-single-bg .about-img-content {
  padding-left: 30px;
  max-width: 220px;
}
@media only screen and (min-width: 576px) {
  .about-single-bg .about-img-content {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .about-single-bg .about-img-content {
    padding-left: 70px;
  }
}
.about-single-bg p {
  font: 500 18px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
  margin-bottom: 0;
  display: none;
}
@media only screen and (min-width: 576px) {
  .about-single-bg p {
    font-size: 16px;
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .about-single-bg p {
    font-size: 18px;
  }
}
.about-single-bg span {
  display: inline-block;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--bd-white);
}
.about-single-bg span i {
  transform: rotate(-45deg);
}

.about-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 60px;
}
@media only screen and (min-width: 576px) {
  .about-img-wrapper .about-inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .about-img-wrapper .about-inner {
    margin-left: 145px;
  }
}
@media only screen and (min-width: 992px) {
  .about-img-wrapper .about-inner {
    margin-left: 250px;
  }
}

.about-btn a {
  padding: 15px 29px;
  background-color: var(--bd-white);
  font: 400 16px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-btn a:hover {
  background-color: var(--bd-primary);
}
.about-btn a span {
  margin-left: 8px;
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  display: none;
}
@media only screen and (min-width: 576px) {
  .about-inner {
    gap: 35px;
    margin-top: 0;
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .about-inner {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .about-inner {
    gap: 70px;
  }
}
.about-inner h2 {
  font: 700 40px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .about-inner h2 {
    color: var(--bd-white);
  }
}
@media only screen and (min-width: 768px) {
  .about-inner h2 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .about-inner h2 {
    font-size: 110px;
  }
}

.home-four-about-area {
  background-color: var(--bd-black);
}

.home-four-about-left .about-text {
  font: 400 20px var(--bd-ff-outfit-sans);
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 768px) {
  .home-four-about-left .about-text {
    max-width: 355px;
    margin: auto;
  }
}

.about-thumb {
  position: relative;
  margin: 110px 0 35px 0;
}
@media only screen and (min-width: 1200px) {
  .about-thumb {
    padding-right: 70px;
    margin: 110px 0 60px 0;
  }
}
.about-thumb img {
  width: 100%;
}
.about-thumb .work-experience {
  position: absolute;
  top: -55px;
  left: 85px;
}

.work-experience {
  height: 120px;
  width: 120px;
  background: var(--bd-white);
  padding: 12px;
  text-align: center;
  border-radius: 50%;
}
@media only screen and (min-width: 576px) {
  .work-experience {
    height: 150px;
    width: 150px;
    padding: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .work-experience {
    height: 200px;
    width: 200px;
    padding: 30px 40px;
  }
}
@media only screen and (min-width: 992px) {
  .work-experience {
    height: 160px;
    width: 160px;
    padding: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .work-experience {
    height: 200px;
    width: 200px;
    padding: 30px 40px;
  }
}
.work-experience h4 {
  font: 400 32px/1.1 var(--bd-ff-bebas-sans);
  color: var(--bd-tertiary);
}
@media only screen and (min-width: 576px) {
  .work-experience h4 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .work-experience h4 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .work-experience h4 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .work-experience h4 {
    font-size: 80px;
  }
}
.work-experience p {
  font: 400 17px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .work-experience p {
    font-size: 20px;
  }
}

.home-four-about-right-content {
  margin-bottom: 70px;
}
.home-four-about-right-content .section-title-four {
  letter-spacing: 0;
}

.about-title-wrapper {
  max-width: 1650px;
  margin: auto;
}
.about-title-wrapper .page-title {
  text-align: center;
}

.page-title {
  font: 700 28px/1.35 var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .page-title {
    font-size: 45px;
    line-height: 1.27;
  }
}
@media only screen and (min-width: 768px) {
  .page-title {
    font-size: 60px;
    text-align: start;
  }
}
@media only screen and (min-width: 992px) {
  .page-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .page-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .page-title {
    font-size: 120px;
    line-height: 1;
  }
}
@media only screen and (min-width: 1600px) {
  .page-title {
    font-size: 160px;
    line-height: 1;
  }
}
.page-title .title-img {
  display: inline-block;
  margin: -7px 10px 0px;
  width: 80px;
}
@media only screen and (min-width: 576px) {
  .page-title .title-img {
    margin: -10px 10px 0px;
    width: 130px;
  }
}
@media only screen and (min-width: 768px) {
  .page-title .title-img {
    margin: -10px 10px 0px;
  }
}
@media only screen and (min-width: 992px) {
  .page-title .title-img {
    margin: -15px 10px 0px;
    width: 160px;
  }
}
@media only screen and (min-width: 1200px) {
  .page-title .title-img {
    width: 180px;
    margin: -22px 10px 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .page-title .title-img {
    margin: -25px 20px 0px;
    width: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .page-title .title-img {
    width: 240px;
  }
}

.page-title-bottom {
  display: flex;
  gap: 0px;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
  justify-content: end;
}
@media only screen and (min-width: 576px) {
  .page-title-bottom {
    gap: 10px;
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) {
  .page-title-bottom {
    margin-top: 100px;
    gap: 140px;
    flex-direction: row;
  }
}
.page-title-bottom .arrow-down-icon {
  flex: 0 0 auto;
}

.page-title-text {
  max-width: 550px;
  padding-top: 20px;
  border-top: 1px solid #E5E5E5;
}
.page-title-text p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.about-bg-img {
  height: 350px;
  background: center/cover no-repeat;
  margin-top: 140px;
}
@media only screen and (min-width: 576px) {
  .about-bg-img {
    height: 400px;
  }
}
@media only screen and (min-width: 768px) {
  .about-bg-img {
    height: 550px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-bg-img {
    height: 780px;
    margin-top: 160px;
  }
}

.about-work-experience {
  height: 150px;
  width: 150px;
  padding: 15px;
  background-color: var(--bd-primary);
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: -75px;
  left: 35px;
}
@media only screen and (min-width: 768px) {
  .about-work-experience {
    top: -100px;
    left: 25px;
    padding: 30px;
    height: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 992px) {
  .about-work-experience {
    left: 115px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-work-experience {
    top: -145px;
    left: 30px;
    padding: 30px;
    height: 250px;
    width: 250px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-work-experience {
    top: -150px;
    left: 0;
    padding: 50px;
    height: 300px;
    width: 300px;
  }
}
.about-work-experience h4 {
  font: 700 35px var(--bd-ff-jakarta-sans);
  margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
  .about-work-experience h4 {
    font-size: 50px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .about-work-experience h4 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-work-experience h4 {
    font-size: 96px;
  }
}
.about-work-experience p {
  font: 500 14px/1.57 var(--bd-ff-jakarta-sans);
  margin-bottom: 0;
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .about-work-experience p {
    font-size: 16px;
    line-height: 1.37;
  }
}
@media only screen and (min-width: 1200px) {
  .about-work-experience p {
    font-size: 20px;
  }
}

.about-capabilities .progress-fill {
  background-color: var(--bd-black) !important;
}

.about-capabalities-area .capabilities-single-iteam::before {
  background-color: var(--bd-black);
}

.about-identity .identity-single-count h3 {
  font: 500 24px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 768px) {
  .about-identity .identity-single-count h3 {
    font-size: 40px;
  }
}
.about-identity .identity-single-count p {
  font-family: var(--bd-ff-jakarta-sans);
}

.identity-single-count:last-child {
  background-color: var(--bd-primary);
}
.identity-single-count:last-child h3 {
  color: var(--bd-black);
}
.identity-single-count:last-child p {
  color: var(--bd-black);
}

.team-top-content .section-text {
  margin: 0;
}
@media only screen and (min-width: 992px) {
  .team-top-content .section-text {
    margin: 0 0 0 auto;
    max-width: 365px;
  }
}
.team-top-content .section-text p {
  margin-bottom: 0;
}

/*----------------------------------------*/
/*  8.2 Blog-Details css
/*----------------------------------------*/
.blog-details-area {
  padding-bottom: 60px;
}

.blog-details-top {
  text-align: center;
  max-width: 1500px;
  margin: auto;
}
@media (max-width: 575px) {
  .blog-details-top {
    padding: 0 10px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-details-top {
    padding: 0px 100px;
  }
}
.blog-details-top P {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}

.blog-details-title {
  font: 600 28px/1.27 var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .blog-details-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-details-title {
    font-size: 55px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-details-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-details-title {
    font-size: 80px;
  }
}

.blog-details-bg-img {
  max-width: 1620px;
  margin: auto;
  margin-bottom: 60px;
  overflow: hidden;
  padding: 0 20px;
}
@media (max-width: 575px) {
  .blog-details-bg-img {
    height: 300px;
  }
}
@media only screen and (min-width: 576px) {
  .blog-details-bg-img {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-details-bg-img {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-details-bg-img {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-details-bg-img {
    margin-bottom: 120px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-details-bg-img {
    padding: 0;
  }
}
.blog-details-bg-img img {
  width: 100%;
  height: 100%;
}

.blog-details-avatar-img {
  height: 240px;
  width: 240px;
  overflow: hidden;
  border-radius: 50%;
  margin: auto;
}
.blog-details-avatar-img img {
  width: 100%;
}

.blog-author-content {
  text-align: center;
  margin-top: 15px;
}
.blog-author-content span {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .blog-author-content span {
    font-size: 20px;
  }
}
.blog-author-content h5 {
  font: 600 20px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .blog-author-content h5 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-author-content h5 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-author-content h5 {
    font-size: 32px;
  }
}

.performance-area {
  padding-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .performance-area {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .performance-area {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .performance-area {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .performance-area {
    padding-bottom: 90px;
  }
}

.blog-performance-content h4 {
  font: 600 26px/1.27 var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .blog-performance-content h4 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-performance-content h4 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-performance-content h4 {
    max-width: 500px;
    margin-bottom: 30px;
    line-height: 1.1;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-performance-content h4 {
    font-size: 45px;
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-performance-content h4 {
    font-size: 50px;
  }
}
.blog-performance-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.blog-explore-area {
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .blog-explore-area {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-explore-area {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-explore-area {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-explore-area {
    margin-bottom: 90px;
  }
}

.blog-explore-title {
  font: 600 26px/1.27 var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) {
  .blog-explore-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-explore-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-explore-title {
    font-size: 45px;
    line-height: 1.1;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-explore-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 992px) {
  .blog-explore-right {
    max-width: 470px;
  }
}

.explore-text {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.blog-details-inner {
  max-width: 1620px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
}
@media only screen and (min-width: 768px) {
  .blog-details-inner {
    gap: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-details-inner {
    padding: 0;
    gap: 40px;
  }
}

.blog-quote-icon {
  height: 140px;
  width: 140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--bd-text-secondary);
}
@media only screen and (min-width: 1200px) {
  .blog-quote-icon {
    height: 240px;
    width: 240px;
  }
}
.blog-quote-icon img {
  width: 50px;
}
@media only screen and (min-width: 1200px) {
  .blog-quote-icon img {
    width: 80px;
  }
}

.blog-creative {
  margin: 60px 0;
}
@media only screen and (min-width: 576px) {
  .blog-creative {
    margin: 70px 0;
  }
}
@media only screen and (min-width: 768px) {
  .blog-creative {
    margin: 80px 0;
  }
}
@media only screen and (min-width: 992px) {
  .blog-creative {
    margin: 100px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-creative {
    margin: 120px 0;
  }
}

.blog-creative-title {
  font: 600 22px/1.27 var(--bd-ff-jakarta-sans);
  margin-bottom: 20px;
  letter-spacing: -2%;
}
@media only screen and (min-width: 576px) {
  .blog-creative-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-creative-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-creative-title {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-creative-title {
    font-size: 40px;
    margin-bottom: 40px;
    line-height: 1.1;
  }
}

.blog-creative-left {
  text-align: center;
}

.creative-author {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ECECEC;
}
.creative-author h6 {
  font: 600 16px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .creative-author h6 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .creative-author h6 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .creative-author h6 {
    font-size: 22px;
  }
}
.creative-author span {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  display: inline-block;
}

.blog-creative-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}

.social-share {
  display: flex;
  align-items: center;
  gap: 25px;
}
.social-share a {
  font-size: 20px;
  color: var(--bd-white);
}
.social-share a:hover {
  color: var(--bd-primary);
}

.post-details-tag {
  background-color: var(--bd-black);
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  margin-top: 60px;
}
@media only screen and (min-width: 576px) {
  .post-details-tag {
    margin-top: 70px;
  }
}
@media only screen and (min-width: 768px) {
  .post-details-tag {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 992px) {
  .post-details-tag {
    margin-top: 100px;
    padding: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .post-details-tag {
    margin-top: 120px;
    padding: 40px 80px;
  }
}

.tag-cloud {
  display: flex;
  gap: 10px;
}
.tag-cloud a {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-secondary);
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid var(--bd-text-body);
  border-radius: 3px;
}
@media only screen and (min-width: 576px) {
  .tag-cloud a {
    padding: 5px 17px;
    font-size: 18px;
  }
}
.tag-cloud a:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: var(--bd-black);
}

.related-post-top {
  margin-bottom: 40px;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .related-post-top {
    margin-bottom: 60px;
  }
}
.related-post-top p {
  font: 400 16px var(--bd-ff-kanit-sans);
}
@media only screen and (min-width: 768px) {
  .related-post-top p {
    font-size: 18px;
  }
}

.related-post-title {
  font: 600 26px var(--bd-ff-jakarta-sans);
  margin-bottom: 5px;
  letter-spacing: -2%;
}
@media only screen and (min-width: 576px) {
  .related-post-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .related-post-title {
    font-size: 40px;
  }
}

.blog-related-post {
  background-color: #F8F8F8;
  padding: 60px 0;
}
@media only screen and (min-width: 576px) {
  .blog-related-post {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 768px) {
  .blog-related-post {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 992px) {
  .blog-related-post {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-related-post {
    padding: 120px 0;
  }
}

.comment-title {
  font: 600 22px var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .comment-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 992px) {
  .comment-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .comment-title {
    font-size: 32px;
  }
}

.single-comment {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .single-comment {
    margin-bottom: 40px;
  }
}
.single-comment .comment-avata {
  flex: 0 0 auto;
}

.blog-comment-area {
  margin-top: 60px;
}
@media only screen and (min-width: 576px) {
  .blog-comment-area {
    margin-top: 70px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-comment-area {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-comment-area {
    margin-top: 120px;
  }
}

.comment-avata {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  border: 1px solid var(--bd-black);
  overflow: hidden;
}

.comment-content .avata-name {
  font: 600 18px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 992px) {
  .comment-content .avata-name {
    font-size: 20px;
  }
}
.comment-content .comment-meta {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  display: inline-block;
  margin-bottom: 10px;
}
.comment-content p {
  font: 400 16px var(--bd-ff-kanit-sans);
}

.reply-btn {
  font: 400 16px var(--bd-ff-kanit-sans);
  float: right;
  color: var(--bd-primary) !important;
}

.reply-btn.collapsed {
  color: var(--bd-black) !important;
}

.reply-box textarea {
  height: 100px;
  padding: 15px 20px;
  font: 400 16px var(--bd-ff-kanit-sans);
  border-radius: 7px;
  border: 1px solid var(--bd-black);
  background-color: #F8F8F8;
}
.reply-box textarea:focus {
  border-color: var(--bd-primary);
}
.reply-box textarea::placeholder, .reply-box textarea::-moz-placeholder {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
.reply-box .comment_post-btn {
  padding: 5px 17px;
  font: 400 16px var(--bd-ff-kanit-sans);
  border-radius: 23px;
  margin-top: 10px;
  border: 1px solid var(--bd-black);
}
.reply-box .comment_post-btn:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

.form-title {
  font: 600 20px var(--bd-ff-jakarta-sans);
  margin-bottom: 30px;
}

.post-btn {
  font: 500 18px var(--bd-ff-kanit-sans);
  background-color: var(--bd-primary);
  color: var(--bd-black);
  padding: 15px 34px;
  border-radius: 30px;
  margin-top: 10px;
  border: 1px solid transparent;
}
@media only screen and (min-width: 992px) {
  .post-btn {
    margin-top: 40px;
  }
}
.post-btn:hover {
  background-color: transparent;
  border-color: var(--bd-primary);
}

/*----------------------------------------*/
/*  8.3 Blog css
/*----------------------------------------*/
.blog-left {
  max-width: 450px;
}

.blog-meta-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (max-width: 575px) {
  .blog-meta-wrapper {
    gap: 5px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-meta-wrapper {
    gap: 5px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-meta-wrapper {
    gap: 10px;
  }
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #CCCCCC;
  overflow: hidden;
  background-color: var(--bd-white);
}

.avatar-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--bd-white);
  text-transform: capitalize;
}
.avatar-name a {
  background-image: linear-gradient(var(--bd-secondary), var(--bd-secondary)), linear-gradient(var(--bd-secondary), var(--bd-secondary));
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}
.avatar-name a:hover {
  background-size: 0 1px, 100% 1px;
}

.blog-thumb {
  position: relative;
  overflow: hidden;
  z-index: -1;
}
.blog-thumb img {
  width: 100%;
}
@media (max-width: 575px) {
  .blog-thumb img {
    height: 320px;
  }
}
.blog-thumb::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(18, 18, 18, 0.8);
  z-index: 2;
}

.blog-single {
  position: relative;
}
.blog-single:hover .blog-category {
  background-color: var(--bd-primary);
}
.blog-single:hover .blog-thumb img {
  transform: scale(1.07);
}
.blog-single:hover .blog-title a {
  background-size: 0 1px, 100% 1px;
}
.blog-single .blog-content {
  position: absolute;
  left: 15px;
  bottom: 15px;
}
@media only screen and (min-width: 576px) {
  .blog-single .blog-content {
    left: 40px;
    bottom: 40px;
    max-width: 100%;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-single .blog-content {
    left: 20px;
    bottom: 20px;
    max-width: 300px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-single .blog-content {
    left: 40px;
    bottom: 40px;
  }
}
.blog-single .blog-category {
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
  padding: 7px 18px;
  transition: 0.3s;
  border-radius: 18px;
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .blog-single .blog-category {
    top: 40px;
    left: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-single .blog-category {
    top: 20px;
    left: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-single .blog-category {
    padding: 3px 13px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-single .blog-category {
    top: 40px;
    left: 40px;
    padding: 7px 18px;
  }
}

.blog-style-two:hover .blog-category {
  background-color: var(--bd-secondary);
}
.blog-style-two .blog-category {
  font: 400 15px var(--bd-ff-kanit-sans);
}
.blog-style-two .blog-title {
  font: 500 18px/1.35 var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 992px) {
  .blog-style-two .blog-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-style-two .blog-title {
    font-size: 22px;
  }
}
.blog-style-two .blog-title a {
  background-image: linear-gradient(var(--bd-secondary), var(--bd-secondary)), linear-gradient(var(--bd-secondary), var(--bd-secondary));
}
.blog-style-two .blog-content .read-post {
  font: 400 17px var(--bd-ff-kanit-sans);
}
.blog-style-two .post-date {
  font: 400 16px var(--bd-ff-kanit-sans);
}
.blog-style-two .avatar-name {
  font: 600 17px var(--bd-ff-jakarta-sans);
}
@media (max-width: 575px) {
  .blog-style-two .avatar-name {
    font-size: 16px;
  }
}

.blog-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 992px) {
  .blog-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-title {
    font-size: 22px;
  }
}
.blog-title a {
  background-image: linear-gradient(var(--bd-primary), var(--bd-primary)), linear-gradient(var(--bd-primary), var(--bd-primary));
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}

.read-post {
  font-weight: 500;
  font-size: 17px;
  color: var(--bd-text-secondary);
  display: inline-block;
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}
.read-post::before {
  position: absolute;
  content: "";
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: #BEBEBE;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.blog-post-bottom {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 30px;
}
@media only screen and (min-width: 1200px) {
  .blog-post-bottom {
    margin-top: 50px;
  }
}
.blog-post-bottom .post-date {
  font-weight: 500;
  font-size: 16px;
  color: var(--bd-text-secondary);
}

.blog-three-top-content {
  margin-bottom: 60px;
}
@media only screen and (min-width: 1200px) {
  .blog-three-top-content {
    margin-bottom: 100px;
  }
}
.blog-three-top-content .section-text-three {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .blog-three-top-content .section-text-three {
    margin-top: 50px;
  }
}
.blog-three-top-content .section-title-three {
  max-width: 600px;
}

.blog-post-top {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-bottom: 80px;
}
@media only screen and (min-width: 576px) {
  .blog-post-top {
    gap: 10px;
    flex-direction: column;
    align-items: start;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-post-top {
    gap: 30px;
    flex-direction: row;
    align-items: center;
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-post-top {
    gap: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-post-top {
    gap: 30px;
  }
}
.blog-post-top .avatar-name {
  font-family: var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
}
.blog-post-top .avatar-name a {
  background-image: linear-gradient(var(--bd-black), var(--bd-black)), linear-gradient(var(--bd-black), var(--bd-black));
}
.blog-post-top .post-date {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}

.blog-three-single-card {
  padding: 20px;
  border: 1px solid #E5E5E5;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) {
  .blog-three-single-card {
    padding: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-three-single-card {
    padding: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-three-single-card {
    padding: 40px;
  }
}
.blog-three-single-card:hover {
  border-color: var(--bd-black);
}
.blog-three-single-card:hover .blog-three-category a {
  background-color: var(--bd-black);
  color: var(--bd-white);
}
.blog-three-single-card:hover .blog-title a {
  background-size: 0 1px, 100% 1px;
}

.blog-three-content {
  padding-right: 0px;
}
@media only screen and (min-width: 768px) {
  .blog-three-content {
    padding-right: 20px;
  }
}
.blog-three-content .read-post {
  color: var(--bd-text-body);
  font: 400 16px var(--bd-ff-kanit-sans);
}
.blog-three-content .read-post::before {
  background-color: var(--bd-text-body);
}
.blog-three-content .blog-title {
  font: 500 20px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .blog-three-content .blog-title {
    font-size: 17px;
    line-height: 1.4;
  }
}
@media only screen and (min-width: 768px) {
  .blog-three-content .blog-title {
    font-size: 20px;
    line-height: 1.2;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-three-content .blog-title {
    font-size: 22px;
  }
}
.blog-three-content .blog-title a {
  background-image: linear-gradient(var(--bd-black), var(--bd-black)), linear-gradient(var(--bd-black), var(--bd-black));
}

.blog-three-category {
  margin-top: 50px;
}
.blog-three-category a {
  font: 400 15px var(--bd-ff-kanit-sans);
  display: inline-block;
  padding: 7px 18px;
  border-radius: 18px;
  background-color: #ECECEC;
}

.blog-style-four-content .section-title-four {
  padding: 0px;
  text-align: start;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .blog-style-four-content .section-title-four {
    padding: 0px 110px 0px 180px;
    text-align: center;
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-style-four-content .section-title-four {
    padding: 0px 200px 0px 140px;
  }
}

@media only screen and (min-width: 992px) {
  .blog-four-right-text {
    max-width: 360px;
    margin: auto;
  }
}

.blog-single-post:hover .blog-style-four-thumb img {
  transform: scale(1.05);
}
.blog-single-post:hover .blog-read-btn a {
  opacity: 1;
  visibility: visible;
  margin-left: 0;
}

.blog-post-content .blog-post-category {
  font: 500 16px var(--bd-ff-outfit-sans);
  display: inline-block;
  color: var(--bd-tertiary);
  margin-bottom: 10px;
}
.blog-post-content h5 {
  font: 400 20px var(--bd-ff-outfit-sans);
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .blog-post-content h5 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-post-content h5 {
    font-size: 24px;
  }
}
.blog-post-content h5 a:hover {
  color: var(--bd-tertiary);
}

.blog-read-btn a {
  font: 400 14px var(--bd-ff-outfit-sans);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid var(--bd-text-secondary);
  margin-left: 10px;
  opacity: 0;
  visibility: hidden;
}
.blog-read-btn a:hover {
  background-color: var(--bd-tertiary);
  color: var(--bd-white);
  border-color: var(--bd-tertiary);
}

.blog-style-four-thumb {
  margin-bottom: 20px;
  overflow: hidden;
}
.blog-style-four-thumb img {
  width: 100%;
}

.blog-post-wrapper {
  margin-top: 60px;
}
@media only screen and (min-width: 1400px) {
  .blog-post-wrapper {
    margin-top: 100px;
  }
}

.section-five-text p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.section-title-wrapper {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .section-title-wrapper .page-title-right {
    position: absolute;
    right: 280px;
    top: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title-wrapper .page-title-right {
    right: 355px;
    top: 75px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-wrapper .page-title-right {
    right: 400px;
    top: 95px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-wrapper .page-title-right {
    right: 430px;
    top: 110px;
  }
}
@media only screen and (min-width: 1600px) {
  .section-title-wrapper .page-title-right {
    right: 155px;
    top: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title-wrapper .section-five-text {
    padding-left: 150px;
    margin-top: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-wrapper .section-five-text {
    padding-left: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-wrapper .section-five-text {
    padding: 0px 100px;
  }
}

.arrow-down-icon {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .arrow-down-icon {
    margin-top: 40px;
    text-align: start;
  }
}
@media (max-width: 575px) {
  .arrow-down-icon img {
    width: 100px;
  }
}

.blog-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.blog-content-top .blog-post-date {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
.blog-content-top .blog-category {
  font: 400 15px var(--bd-ff-kanit-sans);
  padding: 7px 20px;
  background-color: var(--bd-primary);
  border-radius: 18px;
}
@media (max-width: 575px) {
  .blog-content-top .blog-category {
    padding: 5px 16px;
  }
}

.blog-single-title {
  font: 600 20px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .blog-single-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-single-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-single-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-single-title {
    font-size: 24px;
  }
}
.blog-single-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-single-title a:hover {
  color: var(--bd-primary);
}

.blog-content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
@media only screen and (min-width: 576px) {
  .blog-content-bottom {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-content-bottom {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-content-bottom {
    margin-top: 50px;
  }
}
.blog-content-bottom .avatar-name {
  font: 600 18px var(--bd-ff-jakarta-sans);
  color: var(--bd-black);
}
@media (max-width: 575px) {
  .blog-content-bottom .avatar-name {
    font-size: 16px;
  }
}
.blog-content-bottom .avatar-name a {
  background-image: linear-gradient(var(--bd-primary), var(--bd-primary)), linear-gradient(var(--bd-primary), var(--bd-primary));
}

.blog-btn-two a {
  font: 400 14px var(--bd-ff-kanit-sans);
  display: inline-block;
  padding: 9px 22px;
  color: var(--bd-black);
  border: 1px solid var(--bd-text-secondary);
  border-radius: 20px;
}
@media (max-width: 575px) {
  .blog-btn-two a {
    padding: 6px 14px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-btn-two a {
    padding: 6px 14px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-btn-two a {
    padding: 9px 22px;
  }
}
.blog-btn-two a:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

.blog-item {
  position: relative;
  overflow: hidden;
}
.blog-item:hover img {
  transform: scale(1.07);
}
.blog-item .blog-content-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  background-color: var(--bd-white);
  padding: 15px;
}
@media (max-width: 575px) {
  .blog-item .blog-content-wrap {
    width: 88%;
  }
}
@media only screen and (min-width: 576px) {
  .blog-item .blog-content-wrap {
    padding: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-item .blog-content-wrap {
    padding: 15px;
    width: 88%;
  }
}
@media only screen and (min-width: 992px) {
  .blog-item .blog-content-wrap {
    padding: 30px;
    width: 80%;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-item .blog-content-wrap {
    padding: 50px;
  }
}
.blog-item img {
  width: 100%;
}

/*----------------------------------------*/
/*  8.4 brand css
/*----------------------------------------*/
.trusted-left-content {
  max-width: 400px;
}
.trusted-left-content h3 {
  font: 500 32px var(--bd-ff-jakarta-sans);
}
@media (max-width: 575px) {
  .trusted-left-content h3 {
    font-size: 28px;
  }
}
.trusted-left-content h3 span {
  background-color: var(--bd-secondary);
  color: var(--bd-black);
  font-weight: 800;
}

.creative-single h4 {
  font-size: 36px;
}
@media (max-width: 575px) {
  .creative-single h4 {
    font-size: 28px;
  }
}
.creative-single p {
  font-family: var(--bd-ff-kanit-sans);
  max-width: 150px;
  font-weight: 400;
  margin-bottom: 0;
}

.trusted-main-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}
@media only screen and (min-width: 576px) {
  .trusted-main-wrapper {
    justify-content: space-between;
    flex-direction: column;
  }
}
@media only screen and (min-width: 992px) {
  .trusted-main-wrapper {
    justify-content: space-between;
    flex-direction: row;
  }
}

.trusted-creative-wrapper {
  display: flex;
  gap: 20px;
}
@media only screen and (min-width: 576px) {
  .trusted-creative-wrapper {
    gap: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .trusted-creative-wrapper {
    gap: 120px;
  }
}

.home-two-brand {
  padding: 80px 0px;
  position: relative;
  overflow: hidden;
}
.home-two-brand::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #E5E5E5;
  animation-name: slideInLeft;
  animation-duration: 2s;
}

/*----------------------------------------*/
/*  8.5 Capabilities css
/*----------------------------------------*/
.develop-skill {
  padding-bottom: 90px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--bd-border-primary);
}
@media (max-width: 575px) {
  .develop-skill {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) {
  .develop-skill {
    padding-bottom: 40px;
  }
}

.progress-item {
  margin-bottom: 20px;
}
.progress-item .title {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 15px;
}
.progress-item:last-child {
  margin-bottom: 0;
}

.progress--bar {
  position: relative;
  overflow: visible;
  background: transparent;
}

.progress-number {
  position: absolute;
  bottom: 15px;
  line-height: 1;
  color: var(--bd-black);
  transform: translateX(-100%);
  top: -25px;
  z-index: 5;
}

.progress-bg {
  height: 3px;
  background: #D2D2D2;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--bd-black);
  width: 0%;
}

.capabilities-right {
  max-width: inherit;
  margin-left: 0;
}
@media only screen and (min-width: 576px) {
  .capabilities-right {
    margin-left: 0;
    max-width: inherit;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-right {
    max-width: inherit;
    margin-left: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-right {
    max-width: 405px;
    margin-left: 240px;
  }
}
.capabilities-right .progress-number span {
  background-color: var(--bd-white);
}

.single-img-two {
  margin-left: 181px;
}
@media only screen and (min-width: 768px) {
  .single-img-two {
    margin-left: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .single-img-two {
    margin-left: 181px;
  }
}

@media only screen and (min-width: 768px) {
  .single-img-two, .single-img-one {
    width: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .single-img-two, .single-img-one {
    width: 100%;
  }
}

.capabilities-img-wrapper {
  margin: 0px 0px 30px 0px;
}
@media only screen and (min-width: 576px) {
  .capabilities-img-wrapper {
    margin: 0px 0px 30px 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-img-wrapper {
    margin-left: 65px;
  }
}

.expertise-area {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2;
}
.expertise-area::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background: linear-gradient(282.29deg, #000000 47.14%, rgba(0, 0, 0, 0.6) 70.5%);
}
.expertise-area .section-title {
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .expertise-area .section-title {
    max-width: 100%;
  }
}
@media only screen and (min-width: 1400px) {
  .expertise-area .section-title {
    max-width: 500px;
  }
}

.expertise-single {
  max-width: 300px;
  position: relative;
}
@media (max-width: 575px) {
  .expertise-single {
    max-width: 100%;
  }
}
.expertise-single h5 {
  font-size: 20px;
  margin-bottom: 12px;
  text-transform: capitalize;
}
@media only screen and (min-width: 576px) {
  .expertise-single h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .expertise-single h5 {
    font-size: 22px;
  }
}
.expertise-single p {
  color: #C0C0C0;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .expertise-single p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 576px) {
  .expertise-single p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .expertise-single p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .expertise-single p {
    font-size: 17px;
  }
}

.expertise-line {
  position: relative;
  border-top: 1px solid #363535;
  margin-bottom: 35px;
}
@media (max-width: 575px) {
  .expertise-line {
    display: none;
  }
}
.expertise-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 5px solid #363535;
  background-color: var(--bd-primary);
}
.expertise-line::after {
  content: "";
  position: absolute;
  left: 66%;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 5px solid #363535;
  background-color: var(--bd-primary);
}
@media only screen and (min-width: 768px) {
  .expertise-line::after {
    left: 69%;
  }
}
@media only screen and (min-width: 992px) {
  .expertise-line::after {
    left: 68%;
  }
}
.expertise-line .line-bg {
  position: absolute;
  left: 33%;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 5px solid #363535;
  background-color: var(--bd-primary);
}
@media only screen and (min-width: 768px) {
  .expertise-line .line-bg {
    left: 34%;
  }
}
@media only screen and (min-width: 992px) {
  .expertise-line .line-bg {
    left: 33.5%;
  }
}

.capabilities-two-left {
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .capabilities-two-left {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .capabilities-two-left {
    max-width: 100%;
  }
}
.capabilities-two-left p {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--bd-ff-kanit-sans);
}

.capabilities-success-progress .progress-bg {
  height: 5px;
  background-color: #DDDDDD;
}
.capabilities-success-progress .progress-fill {
  background-color: var(--bd-secondary);
}
.capabilities-success-progress .title {
  font-size: 17px;
  font-weight: 400;
  font-family: var(--bd-ff-kanit-sans);
}
.capabilities-success-progress .progress-number {
  font-family: var(--bd-ff-kanit-sans);
}
.capabilities-success-progress .progress-number span {
  background-color: var(--bd-white);
}

.capabilities-single-iteam {
  padding: 0px 30px;
  position: relative;
  overflow: hidden;
}
.capabilities-single-iteam:hover::before {
  animation-play-state: paused;
}
@media only screen and (min-width: 576px) {
  .capabilities-single-iteam {
    padding: 0px 0px 0px 20px;
  }
}
@media only screen and (min-width: 768px) {
  .capabilities-single-iteam {
    padding: 0px 30px;
  }
}
@media only screen and (min-width: 992px) {
  .capabilities-single-iteam {
    padding: 0px 0px 0px 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-single-iteam {
    padding: 0px 30px;
  }
}
.capabilities-single-iteam::before {
  content: "";
  position: absolute;
  left: 1.1px;
  top: 45px;
  width: 2px;
  height: 45px;
  background-color: var(--bd-secondary);
  animation: topToBottom 5s linear infinite;
  z-index: 2;
}
.capabilities-single-iteam::after {
  content: "";
  position: absolute;
  left: 1.1px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
}
.capabilities-single-iteam h5 {
  font: 700 20px var(--bd-ff-jakarta-sans);
  margin-bottom: 10px;
  max-width: inherit;
}
@media (max-width: 575px) {
  .capabilities-single-iteam h5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) {
  .capabilities-single-iteam h5 {
    max-width: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .capabilities-single-iteam h5 {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .capabilities-single-iteam h5 {
    max-width: 200px;
  }
}
.capabilities-single-iteam span {
  font-size: 16px;
  color: var(--bd-text-body);
  font-family: var(--bd-ff-kanit-sans);
  margin-bottom: 10px;
  display: inline-block;
}
.capabilities-single-iteam p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .capabilities-single-iteam p {
    margin-bottom: 20px;
  }
}

.capabilities-left {
  padding-right: 0px;
}
@media only screen and (min-width: 992px) {
  .capabilities-left {
    padding-right: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-left {
    padding-right: 180px;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-left {
    padding-right: 320px;
  }
}

.capabilities-expart-content {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .capabilities-expart-content {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-expart-content {
    margin: 20px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-expart-content {
    margin: 0;
  }
}
.capabilities-expart-content h2 {
  font: 400 50px/1.1 var(--bd-ff-bebas-sans);
  flex: 0 0 auto;
}
@media only screen and (min-width: 768px) {
  .capabilities-expart-content h2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .capabilities-expart-content h2 {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-expart-content h2 {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-expart-content h2 {
    font-size: 128px;
    margin-top: 20px;
  }
}
.capabilities-expart-content h2 span {
  color: var(--bd-tertiary);
}
.capabilities-expart-content p {
  font: 400 28px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
  line-height: 1;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .capabilities-expart-content p {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1200px) {
  .capabilities-expart-content p {
    max-width: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .capabilities-expart-content p {
    font-size: 32px;
    max-width: 100%;
  }
}

.capabilities-text {
  font: 400 18px var(--bd-ff-outfit-sans);
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .capabilities-text {
    margin-bottom: 20px;
  }
}

.capabilities-expert-progress .progress-item .title {
  font: 500 18px var(--bd-ff-outfit-sans);
}
.capabilities-expert-progress .progress-bg {
  height: 5px;
  background-color: var(--bd-text-secondary);
}
.capabilities-expert-progress .progress-fill {
  background-color: var(--bd-tertiary);
}
.capabilities-expert-progress .progress-number {
  font: 600 13px var(--bd-ff-outfit-sans);
}
.capabilities-expert-progress .progress-number .percent {
  color: var(--bd-white);
  background-color: var(--bd-black);
  padding: 5px 8px;
  top: -10px;
  border-radius: 4px;
  left: -20px;
  position: absolute;
}
.capabilities-expert-progress .progress-number .percent::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 1% 0, 100% 0);
  background-color: var(--bd-black);
}

.process-area {
  background-color: var(--bd-black);
}

.process-thumb {
  overflow: hidden;
  border-radius: 9px;
  position: relative;
  margin-bottom: 80px;
  transition: 0.4s;
}
@media only screen and (min-width: 992px) {
  .process-thumb {
    margin-bottom: -162px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-thumb {
    margin-bottom: -205px;
  }
}
@media only screen and (min-width: 1400px) {
  .process-thumb {
    margin-bottom: -230px;
  }
}
.process-thumb:hover {
  border-radius: 25px;
}
.process-thumb .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.process-thumb .video-play-btn:hover {
  background-color: var(--bd-tertiary);
  color: var(--bd-white);
}
.process-thumb::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(18, 18, 18, 0.1);
}
.process-thumb img {
  width: 100%;
}

.process-left {
  padding-right: 50px;
}

.section-text-four.process-right {
  margin-top: 30px;
}
@media only screen and (min-width: 992px) {
  .section-text-four.process-right {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-text-four.process-right {
    padding: 0px 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-text-four.process-right {
    padding: 0px 100px;
  }
}
.section-text-four.process-right p {
  color: var(--bd-text-secondary);
}

.process-wrapper {
  position: relative;
  z-index: 5;
  margin-top: 60px;
}
@media only screen and (min-width: 768px) {
  .process-wrapper {
    margin-top: 100px;
  }
}
.process-wrapper .process-line {
  border-bottom: 1px solid #222222;
  position: absolute;
  left: 0;
  top: 113px;
  width: 100%;
  z-index: -1;
  display: none;
}
@media only screen and (min-width: 992px) {
  .process-wrapper .process-line {
    display: block;
    top: 83px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-wrapper .process-line {
    top: 113px;
  }
}

.process-single-inner:hover .process-title::before {
  right: auto;
  left: 0;
  width: 100%;
}
.process-single-inner:hover .process-list {
  color: var(--bd-tertiary);
}
.process-single-inner .process-list {
  font: 400 20px var(--bd-ff-bebas-sans);
  display: inline-block;
  margin-bottom: 10px;
  color: var(--bd-white);
  transition: 0.3s;
}
.process-single-inner .process-title {
  font: 400 25px var(--bd-ff-bebas-sans);
  color: var(--bd-text-secondary);
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .process-single-inner .process-title {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-single-inner .process-title {
    font-size: 36px;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}
.process-single-inner .process-title::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: auto;
  right: 0;
  height: 1px;
  width: 0;
  background-color: #515151;
  transition: 0.3s;
}
.process-single-inner p {
  font: 400 18px var(--bd-ff-outfit-sans);
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 992px) {
  .process-single-inner p {
    font-size: 17px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-single-inner p {
    font-size: 18px;
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  font: 400 35px/1.1 var(--bd-ff-bebas-sans);
  color: var(--bd-tertiary);
}
@media only screen and (min-width: 768px) {
  .cd-words-wrapper {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .cd-words-wrapper {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .cd-words-wrapper {
    font-size: 86px;
  }
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
  font-weight: inherit;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}

.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

.cd-headline {
  margin-left: 0px;
  text-align: start !important;
}
@media only screen and (min-width: 992px) {
  .cd-headline {
    text-align: center !important;
  }
}
@media only screen and (min-width: 1200px) {
  .cd-headline {
    margin-left: 300px;
  }
}
.cd-headline.clip span {
  display: inline-block;
  transition: none;
}
.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}
.cd-headline.clip .cd-words-wrapper::after {
  top: 0;
  right: 0;
  width: 1px;
  content: "";
  height: 100%;
  position: absolute;
  background-color: var(--bd-white);
}
.cd-headline.clip b {
  opacity: 0;
}
.cd-headline.clip b.is-visible {
  opacity: 1;
}

/*----------------------------------------*/
/*  8.6 Contact css
/*----------------------------------------*/
.contact-form .input-field {
  margin-bottom: 20px;
}
.contact-form .input-field input {
  height: 55px;
  background-color: #F8F8F8;
  border: 1px solid transparent;
  border-radius: 5px;
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
  padding: 0px 20px;
}
.contact-form .input-field input:focus {
  border-color: var(--bd-primary);
}
.contact-form .input-field input::placeholder, .contact-form .input-field input::-moz-placeholder {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
}
.contact-form textarea {
  background-color: #F8F8F8;
  border: 1px solid transparent;
  border-radius: 11px;
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
  min-height: 160px;
  resize: none;
  padding: 20px;
}
@media (max-width: 575px) {
  .contact-form textarea {
    min-height: 140px;
  }
}
.contact-form textarea:focus {
  border-color: var(--bd-primary);
}
.contact-form textarea::placeholder, .contact-form textarea::-moz-placeholder {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
}

.contact-form-main-wrapper {
  background-color: #181818;
  padding: 40px 50px;
  margin-top: 50px;
  border-radius: 11px;
}
@media (max-width: 575px), only screen and (min-width: 576px) {
  .contact-form-main-wrapper {
    padding: 20px 15px;
  }
}
.contact-form-main-wrapper h6 {
  font-size: 22px;
  margin-bottom: 30px;
}

@media only screen and (min-width: 768px) {
  .contact-top-area.page-title-area .section-title-wrapper .page-title-right {
    right: 200px;
    top: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-top-area.page-title-area .section-title-wrapper .page-title-right {
    right: 300px;
    top: 90px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-top-area.page-title-area .section-title-wrapper .page-title-right {
    top: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .contact-top-area.page-title-area .section-title-wrapper .page-title-right {
    top: 120px;
    right: 350px;
  }
}
@media only screen and (min-width: 1600px) {
  .contact-top-area.page-title-area .section-title-wrapper .page-title-right {
    top: 150px;
    right: 0;
  }
}
@media only screen and (min-width: 768px) {
  .contact-top-area.page-title-area .section-title-wrapper .section-five-text {
    padding: 0px 70px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-top-area.page-title-area .section-title-wrapper .section-five-text {
    padding: 0px 0px 0 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-top-area.page-title-area .section-title-wrapper .section-five-text {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1600px) {
  .contact-top-area.page-title-area .section-title-wrapper .section-five-text {
    padding: 0px 70px;
    margin-top: 40px;
  }
}
.contact-top-area.page-title-area .arrow-down-right {
  margin: 20px 0 20px 0;
}
@media (max-width: 575px) {
  .contact-top-area.page-title-area .arrow-down-right {
    text-align: center;
  }
}
@media only screen and (min-width: 576px) {
  .contact-top-area.page-title-area .arrow-down-right {
    margin: 30px 0 20px 0;
  }
}
@media only screen and (min-width: 768px) {
  .contact-top-area.page-title-area .arrow-down-right {
    margin: 70px 0 30px 0;
  }
}
@media (max-width: 575px) {
  .contact-top-area.page-title-area .arrow-down-right img {
    width: 100px;
  }
}

.contact-bg-img {
  margin-bottom: 70px;
}
@media (max-width: 575px) {
  .contact-bg-img {
    height: 300px;
  }
}
@media only screen and (min-width: 768px) {
  .contact-bg-img {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-bg-img {
    margin-bottom: 120px;
  }
}
.contact-bg-img img {
  width: 100%;
  height: 100%;
}

.contact-text h6 {
  font: 700 18px var(--bd-ff-jakarta-sans);
  margin-bottom: 3px;
}
.contact-text p {
  font: 400 16px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}
.contact-text p a:hover {
  text-decoration: underline;
}

.contact-icon {
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-white);
  border-radius: 11px;
}

.contact-single-inner {
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 11px;
  background-color: var(--bd-primary);
}
.contact-single-inner:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .contact-single-inner {
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-single-inner {
    padding: 25px;
  }
}

@media only screen and (min-width: 576px) {
  .contact-left {
    max-width: 350px;
    margin: auto;
  }
}
@media only screen and (min-width: 992px) {
  .contact-left {
    max-width: 100%;
    margin-top: -115px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-left {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .contact-left {
    padding-right: 80px;
  }
}

.contact-right {
  box-shadow: 0px 15px 25px 0px rgba(0, 0, 1, 0.0705882353);
  padding: 20px;
  border-radius: 7px;
}
@media only screen and (min-width: 576px) {
  .contact-right {
    padding: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-right {
    padding: 80px;
  }
}

.contact-form-content {
  text-align: center;
  margin-bottom: 60px;
}
.contact-form-content h3 {
  font: 700 26px var(--bd-ff-jakarta-sans);
  margin-bottom: 15px;
  letter-spacing: -2%;
}
@media only screen and (min-width: 576px) {
  .contact-form-content h3 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .contact-form-content h3 {
    font-size: 35px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-form-content h3 {
    font-size: 40px;
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-form-content h3 {
    font-size: 48px;
  }
}
.contact-form-content p {
  font: 400 18px/1.65 var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  margin-bottom: 0;
}

.contact-input-field {
  margin-bottom: 25px;
}
.contact-input-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--bd-black);
  font: 400 16px var(--bd-ff-kanit-sans);
}
.contact-input-field input {
  height: 55px;
  border-radius: 11px;
  background-color: transparent;
  border: 1px solid var(--bd-text-secondary);
  color: var(--bd-black);
  font: 400 16px var(--bd-ff-kanit-sans);
}
.contact-input-field input:focus {
  border-color: var(--bd-primary);
}
.contact-input-field textarea {
  min-height: 200px;
  background-color: transparent;
  border: 1px solid var(--bd-text-secondary);
  border-radius: 11px;
  padding: 15px 20px;
  font: 400 16px var(--bd-ff-kanit-sans);
}
.contact-input-field textarea:focus {
  background-color: var(--bd-white);
  border-color: var(--bd-primary);
}
.contact-input-field textarea::placeholder, .contact-input-field textarea::-moz-placeholder {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
}

.contact-form-btn {
  margin-bottom: 30px;
}
.contact-form-btn button {
  font: 400 18px var(--bd-ff-kanit-sans);
  background-color: var(--bd-white);
  color: var(--bd-black);
  padding: 15px 34px;
  border-radius: 30px;
  display: inline-block;
  border: 1px solid var(--bd-text-secondary);
}
.contact-form-btn button:hover {
  color: var(--bd-white);
  background-color: var(--bd-black);
  border-color: var(--bd-black);
}

.customer-list {
  display: flex;
  gap: 10px;
  align-items: center;
}
.customer-list ul {
  display: flex;
  margin-bottom: 8px;
}
.customer-list ul li {
  margin-left: -15px;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: auto;
  border: 2px solid var(--bd-border-primary);
}
.customer-list ul li:first-child {
  margin-left: 0;
}
.customer-list .review {
  background-color: var(--bd-white);
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.customer-list p {
  font: 400 16px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
  color: var(--bd-black);
}
@media (max-width: 575px) {
  .customer-list p {
    font-size: 15px;
  }
}

.text-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
}
.text-content h4 {
  font-size: 24px;
  font-family: var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 768px) {
  .text-content h4 {
    font-size: 30px;
  }
}

/*----------------------------------------*/
/*  8.7 Counter css
/*----------------------------------------*/
.counter-area {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 80px 0px;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .counter-area {
    padding: 80px 0px;
  }
}
@media only screen and (min-width: 992px) {
  .counter-area {
    padding: 100px 0px;
  }
}
.counter-area::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(18, 18, 18, 0.7);
  z-index: -1;
}

.single-counter {
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .single-counter {
    padding: 0px 35px;
    text-align: start;
  }
}
@media only screen and (min-width: 768px) {
  .single-counter {
    padding: 0px 85px;
    text-align: center;
  }
}
@media only screen and (min-width: 992px) {
  .single-counter {
    padding: 0px;
    text-align: start;
  }
}
.single-counter .counter-list {
  font-weight: 400;
  color: var(--bd-primary);
  display: inline-block;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 576px) {
  .single-counter .counter-list {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .single-counter .counter-list {
    margin-bottom: 35px;
  }
}
.single-counter h2 {
  font-size: 35px;
  font-weight: 400;
  color: var(--bd-white);
}
@media (max-width: 575px) {
  .single-counter h2 {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 576px) {
  .single-counter h2 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-counter h2 {
    font-size: 100px;
  }
}
.single-counter p {
  color: #C9C9C9;
  text-transform: capitalize;
  max-width: 160px;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .single-counter p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 576px) {
  .single-counter p {
    max-width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .single-counter p {
    max-width: 160px;
  }
}

/*----------------------------------------*/
/*  8.8 Faq css
/*----------------------------------------*/
.accordion_style .accordion {
  border: none;
}
.accordion_style .accordion .accordion-item {
  border: none;
  border-radius: 0;
  margin-bottom: 25px;
}
.accordion_style .accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion_style .accordion .accordion-item .accordion-button {
  border-bottom: 0;
  border-radius: 0;
  font-size: 17px;
  color: var(--bd-black);
  padding: 0;
  font-weight: 500;
  padding-left: 30px;
  flex-wrap: wrap;
}
.accordion_style .accordion .accordion-item .accordion-button[aria-expanded=true], .accordion_style .accordion .accordion-item .accordion-button::after {
  color: var(--bd-black);
}
.accordion_style .accordion .accordion-item .accordion-button::after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
  height: 1.5px;
  width: 12px;
  content: "";
  background-color: var(--bd-black);
}
.accordion_style .accordion .accordion-item .accordion-button::before {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
  height: 12px;
  width: 1.5px;
  content: "";
  background-color: var(--bd-black);
}
.accordion_style .accordion .accordion-item .accordion-button:focus {
  border: none;
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.accordion_style .accordion .accordion-item .accordion-button-style::before {
  background-color: transparent;
}
.accordion_style .accordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}
.accordion_style .accordion .accordion-item .accordion-button:not(.collapsed)::before {
  transform: translateY(-50%) rotate(-90deg);
  z-index: 8;
}
.accordion_style .accordion .accordion-item .accordion-body {
  padding: 0 0 0 20px;
  margin: 10px 0 0 5px;
  border-left: 1.5px solid #8B8B8B;
}

.description {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
}
.description strong {
  font-size: 16px;
  font-weight: 500;
}

.accordion_style-two .accordion {
  border: none;
}
.accordion_style-two .accordion .accordion-item {
  border: none;
  border-radius: 0;
  background-color: transparent;
  border-top: 1px solid #222222;
}
.accordion_style-two .accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion_style-two .accordion .accordion-item .accordion-button {
  border-bottom: 0;
  border-radius: 0;
  font: 400 28px/1.1 var(--bd-ff-bebas-sans);
  color: #BBBBBB;
  padding: 0;
  background-color: transparent;
  padding: 20px 20px 20px 0px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) {
  .accordion_style-two .accordion .accordion-item .accordion-button {
    font-size: 30px;
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .accordion_style-two .accordion .accordion-item .accordion-button {
    font-size: 36px;
    padding: 30px 20px;
  }
}
.accordion_style-two .accordion .accordion-item .accordion-button[aria-expanded=true], .accordion_style-two .accordion .accordion-item .accordion-button::after {
  color: var(--bd-black);
}
.accordion_style-two .accordion .accordion-item .accordion-button::after {
  display: none;
}
.accordion_style-two .accordion .accordion-item .accordion-button::before {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
  content: "\f04b";
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #222222;
  color: var(--bd-white);
  font-weight: 600;
  font-family: var(--bd-ff-fontawesome);
  font-size: 14px;
}
.accordion_style-two .accordion .accordion-item .accordion-button:focus {
  border: none;
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.accordion_style-two .accordion .accordion-item .accordion-button-style::before {
  background-color: transparent;
}
.accordion_style-two .accordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: var(--bd-text-secondary);
}
.accordion_style-two .accordion .accordion-item .accordion-button:not(.collapsed)::before {
  transform: translateY(-50%) rotate(90deg);
  z-index: 8;
  background-color: var(--bd-tertiary);
}
.accordion_style-two .accordion .accordion-item .accordion-body {
  padding: 15px 0px;
  border-top: 1px solid #222222;
}
@media only screen and (min-width: 768px) {
  .accordion_style-two .accordion .accordion-item .accordion-body {
    padding: 30px 20px;
  }
}
.accordion_style-two .description {
  font: 400 18px var(--bd-ff-outfit-sans);
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 576px) {
  .accordion_style-two .description {
    font-size: 20px;
  }
}

.accordion_style-three .accordion .accordion-item {
  margin-bottom: 20px;
}
.accordion_style-three .accordion .accordion-item .accordion-button {
  font: 400 24px var(--bd-ff-bebas-sans);
}
@media only screen and (min-width: 768px) {
  .accordion_style-three .accordion .accordion-item .accordion-button {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .accordion_style-three .accordion .accordion-item .accordion-button {
    font-size: 36px;
  }
}
.accordion_style-three .accordion .accordion-item .description {
  font: 400 18px var(--bd-ff-outfit-sans);
}
.accordion_style-three .accordion .accordion-item .accordion-body {
  padding: 0;
  border: 0;
}

.page-title-area {
  padding-top: 120px;
}
@media only screen and (min-width: 768px) {
  .page-title-area {
    padding-top: 140px;
  }
}
.page-title-area .section-title-wrapper .page-title-right {
  right: 0;
}

.faq-bg {
  background: center/cover no-repeat;
  height: 350px;
  margin-top: 30px;
}
@media only screen and (min-width: 576px) {
  .faq-bg {
    height: 400px;
  }
}
@media only screen and (min-width: 768px) {
  .faq-bg {
    height: 550px;
  }
}
@media only screen and (min-width: 1200px) {
  .faq-bg {
    height: 780px;
  }
}

.faq-main-wrapper {
  background-color: var(--bd-white);
  border-radius: 9px;
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .faq-main-wrapper {
    margin-top: -280px;
    padding: 70px 70px 0px 70px;
  }
}
@media only screen and (min-width: 992px) {
  .faq-main-wrapper {
    padding: 40px 40px 0px 40px;
    margin-top: -220px;
  }
}
@media only screen and (min-width: 1400px) {
  .faq-main-wrapper {
    padding: 70px 70px 0px 70px;
    margin-top: -280px;
  }
}

.faq_request-wrapper {
  padding: 25px;
  border: 1px solid #DCDDE3;
  text-align: center;
  border-radius: 21px;
}
@media only screen and (min-width: 768px) {
  .faq_request-wrapper {
    padding: 40px 45px;
  }
}
@media only screen and (min-width: 992px) {
  .faq_request-wrapper {
    padding: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .faq_request-wrapper {
    padding: 40px 45px;
  }
}
.faq_request-wrapper:hover .faq_icon svg {
  animation: none;
}
.faq_request-wrapper p {
  font: 400 14px/1.65 var(--bd-ff-jakarta-sans);
}

.faq_text {
  font: 600 18px var(--bd-ff-jakarta-sans);
  margin-bottom: 10px;
}

.faq_icon {
  margin-bottom: 15px;
  transition: 0.3s;
}
.faq_icon svg {
  animation: bounce 2s infinite;
}
@media only screen and (min-width: 992px) {
  .faq_icon svg {
    width: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .faq_icon svg {
    width: 100%;
  }
}

.faq_button button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 15px 34px;
  border-radius: 25px;
  background-color: var(--bd-primary);
  color: var(--bd-black);
  font: 400 14px var(--bd-ff-jakarta-sans);
}
.faq_button button:hover {
  background-color: var(--bd-black);
  color: var(--bd-white);
}
@media (max-width: 575px) {
  .faq_button button {
    padding: 13px 17px;
  }
}
@media only screen and (min-width: 992px) {
  .faq_button button {
    padding: 15px 23px;
  }
}
@media only screen and (min-width: 1200px) {
  .faq_button button {
    padding: 15px 34px;
  }
}

.faq-accrodient-wrapper {
  padding: 20px;
  border: 1px solid #DCDDE3;
  border-radius: 9px;
}
@media only screen and (min-width: 768px) {
  .faq-accrodient-wrapper {
    padding: 40px 45px;
  }
}
@media only screen and (min-width: 992px) {
  .faq-accrodient-wrapper {
    margin-left: 40px;
    padding: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .faq-accrodient-wrapper {
    padding: 45px 75px;
  }
}

.accordion_list-style .accordion .accordion-item {
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) {
  .accordion_list-style .accordion .accordion-item {
    margin-bottom: 20px;
  }
}
.accordion_list-style .accordion .accordion-item .accordion-button {
  font: 600 17px var(--bd-ff-jakarta-sans);
  padding: 10px 12px;
}
@media only screen and (min-width: 576px) {
  .accordion_list-style .accordion .accordion-item .accordion-button {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .accordion_list-style .accordion .accordion-item .accordion-button {
    font-size: 22px;
    padding: 17px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .accordion_list-style .accordion .accordion-item .accordion-button {
    font-size: 24px;
  }
}
.accordion_list-style .accordion .accordion-item .accordion-button::before {
  right: 19px;
  height: 18px;
  left: inherit;
  height: 15px;
}
@media only screen and (min-width: 768px) {
  .accordion_list-style .accordion .accordion-item .accordion-button::before {
    right: 44px;
    height: 18px;
  }
}
.accordion_list-style .accordion .accordion-item .accordion-button::after {
  right: 12px;
  left: inherit;
  width: 18px;
  width: 15px;
}
@media only screen and (min-width: 768px) {
  .accordion_list-style .accordion .accordion-item .accordion-button::after {
    right: 36px;
    width: 18px;
  }
}
.accordion_list-style .accordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  background-color: var(--bd-primary);
}
.accordion_list-style .accordion .accordion-item .description {
  font: 500 16px/1.67 var(--bd-ff-jakarta-sans);
}
.accordion_list-style .accordion .accordion-item .accordion-body {
  padding: 5px 12px 0 0;
  border: 0;
}
@media only screen and (min-width: 768px) {
  .accordion_list-style .accordion .accordion-item .accordion-body {
    padding: 10px 65px 0px 30px;
  }
}

.page-title-area.faq-title-area .section-title-wrapper .page-title-right {
  right: 200px;
}
@media only screen and (min-width: 992px) {
  .page-title-area.faq-title-area .section-title-wrapper .page-title-right {
    right: 250px;
  }
}
@media only screen and (min-width: 1200px) {
  .page-title-area.faq-title-area .section-title-wrapper .page-title-right {
    right: 280px;
  }
}
@media only screen and (min-width: 1400px) {
  .page-title-area.faq-title-area .section-title-wrapper .page-title-right {
    right: 300px;
  }
}
@media only screen and (min-width: 1600px) {
  .page-title-area.faq-title-area .section-title-wrapper .page-title-right {
    right: 0;
  }
}

/*----------------------------------------*/
/*  8.10 Identity css
/*----------------------------------------*/
@media only screen and (min-width: 576px) {
  .identity-area .img-box-reveal {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .identity-area .img-box-reveal {
    margin-left: -15px;
  }
}

.identity-img {
  margin-left: 0;
  height: 220px;
}
@media only screen and (min-width: 576px) {
  .identity-img {
    margin-left: 0;
    height: 280px;
  }
}
@media only screen and (min-width: 768px) {
  .identity-img {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) {
  .identity-img {
    height: 305px;
  }
}
@media only screen and (min-width: 1200px) {
  .identity-img {
    height: 360px;
  }
}
@media only screen and (min-width: 1400px) {
  .identity-img {
    margin-left: -305px;
    height: 560px;
  }
}
.identity-img img {
  /* height: 100%; */
  width: 100%;
}

.identity-single-count {
  padding: 25px 30px;
  background-color: var(--bd-black);
  max-width: 220px;
}
@media (max-width: 575px) {
  .identity-single-count {
    padding: 15px;
  }
}
.identity-single-count h3 {
  color: var(--bd-white);
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .identity-single-count h3 {
    font-size: 25px;
  }
}
.identity-single-count p {
  font-size: 14px;
  color: var(--bd-white);
  margin-bottom: 0;
  line-height: 1.5;
}
@media (max-width: 575px) {
  .identity-single-count p {
    font-size: 12px;
  }
}

.identity-left-content .section-top-content {
  max-width: 550px;
}
@media only screen and (min-width: 768px) {
  .identity-left-content .section-top-content {
    max-width: inherit;
  }
}
@media only screen and (min-width: 1400px) {
  .identity-left-content .section-top-content {
    max-width: 620px;
  }
}

.identity-thumb {
  position: relative;
}
.identity-thumb .identity-counter-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 30px;
}
@media (max-width: 575px) {
  .identity-thumb .identity-counter-wrapper {
    gap: 15px;
  }
}

.identity-right {
  margin: 0 0 30px 0;
  overflow: hidden;
}
@media only screen and (min-width: 576px) {
  .identity-right {
    margin: 0 0 30px 0;
  }
}
@media only screen and (min-width: 992px) {
  .identity-right {
    margin: 0px 0px 45px 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .identity-right {
    margin: 0px 0px 85px 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .identity-right {
    margin: 0px 0px 85px 110px;
  }
}
.identity-right span.identity-since {
  display: inline-block;
  padding: 8px 17px;
  background-color: var(--bd-gray);
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
.identity-right p {
  margin-bottom: 40px;
}

.location {
  padding-left: 30px;
  border-left: 1px solid #E5E5E5;
}
.location .number {
  color: var(--bd-black);
}
.location .number a:hover {
  color: var(--bd-primary);
}
.location .mail {
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-text-body);
}
.location .mail a:hover {
  color: var(--bd-primary);
}

.location-map {
  margin-bottom: 25px;
}
.location-map a {
  color: var(--bd-black);
  display: contents;
  display: inline-grid;
}
.location-map a span {
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-text-body);
  margin-bottom: 0;
}

.identity-reveal-img {
  margin-left: 0px;
  height: 220px;
  background: center/cover no-repeat;
}
@media only screen and (min-width: 576px) {
  .identity-reveal-img {
    height: 280px;
  }
}
@media only screen and (min-width: 768px) {
  .identity-reveal-img {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) {
  .identity-reveal-img {
    height: 305px;
  }
}
@media only screen and (min-width: 1200px) {
  .identity-reveal-img {
    height: 360px;
  }
}
@media only screen and (min-width: 1400px) {
  .identity-reveal-img {
    height: 560px;
  }
}

.img-box-reveal .img {
  transform-origin: left;
  overflow: hidden;
}

/*----------------------------------------*/
/*  8.11 Pricing css
/*----------------------------------------*/
.pricing-area .section-title-two {
  max-width: 500px;
}

.pricing-main-wrapper {
  margin-top: 40px;
}
@media only screen and (min-width: 576px) {
  .pricing-main-wrapper {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .pricing-main-wrapper {
    margin-top: 80px;
  }
}

.pricing-single-inner {
  padding: 20px;
  background-color: #F5F5F5;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .pricing-single-inner {
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .pricing-single-inner {
    padding: 50px 40px;
  }
}
@media only screen and (min-width: 992px) {
  .pricing-single-inner {
    padding: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing-single-inner {
    padding: 50px 40px;
  }
}
.pricing-single-inner:hover .pricing-btn .btn-secondary {
  background-color: var(--bd-secondary);
  color: var(--bd-black);
}
.pricing-single-inner::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 2px;
  background-color: var(--bd-secondary);
}
.pricing-single-inner .pricing-shape {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.pricing-single-inner span {
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
.pricing-single-inner span.pricinig-tag {
  float: right;
  font-size: 12px;
  padding: 5px 14px;
  background-color: var(--bd-secondary);
  border-radius: 3px;
  color: var(--bd-black);
}

.pricing-price {
  font: 600 35px var(--bd-ff-jakarta-sans);
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--bd-border-primary);
}
@media only screen and (min-width: 576px) {
  .pricing-price {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .pricing-price {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing-price {
    font-size: 64px;
  }
}

.section-text p {
  font: 400 18px/1.65 var(--bd-ff-kanit-sans);
}

.pricing-list {
  margin-bottom: 50px;
}
@media only screen and (min-width: 576px) {
  .pricing-list {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing-list {
    margin-bottom: 150px;
  }
}
.pricing-list ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
@media only screen and (min-width: 576px) {
  .pricing-list ul li {
    font-size: 16px;
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .pricing-list ul li {
    font-size: 18px;
    padding-left: 30px;
  }
}
.pricing-list ul li::before {
  position: absolute;
  left: 0;
  top: 3px;
  height: 15px;
  width: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #9A9A9A;
  color: var(--bd-white);
  content: "\f00c";
  font-size: 10px;
  font-family: var(--bd-ff-fontawesome);
}

.pricing-btn .btn-secondary {
  width: 100%;
  text-transform: capitalize;
  font-weight: 500;
}

/*----------------------------------------*/
/*  8.14 Service css
/*----------------------------------------*/
.service-top {
  max-width: 700px;
}
.service-top .section-title {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .service-top .section-title {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .service-top .section-title {
    margin-bottom: 40px;
  }
}
.service-top p {
  max-width: 350px;
  margin-left: 0;
}
@media only screen and (min-width: 576px) {
  .service-top p {
    max-width: inherit;
    margin-left: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-top p {
    max-width: 350px;
    margin-left: 140px;
  }
}

.service-tab {
  display: flex;
  gap: 10px 20px;
  justify-content: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) {
  .service-tab {
    gap: 15px 60px;
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .service-tab {
    gap: 30px 60px;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-tab {
    gap: 10px 60px;
    justify-content: center;
    margin-bottom: 115px;
  }
}
.service-tab .nav-link {
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  position: relative;
  padding: 0 12px 0px 0px;
  color: var(--bd-black);
  display: inline-flex;
  align-items: center;
}
@media only screen and (min-width: 576px) {
  .service-tab .nav-link {
    font-size: 24px;
  }
}
.service-tab .nav-link:hover::before {
  width: 100%;
}
.service-tab .nav-link span {
  font-size: 16px;
  color: var(--bd-text-body);
  margin-right: 7px;
}
.service-tab .nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 9px;
  height: 20px;
  width: 1px;
  background-color: var(--bd-black);
  transform: rotate(18deg);
}
@media (max-width: 575px) {
  .service-tab .nav-link::after {
    height: 14px;
  }
}
.service-tab .nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  height: 20px;
  width: 0;
  height: 3px;
  background-color: var(--bd-primary);
  transform: translateX(-50%);
  transition: 0.3s;
}
.service-tab .active {
  font-weight: 500;
}
.service-tab .active::before {
  width: 100%;
}

.service-list {
  column-count: 2;
  gap: 10px;
  counter-reset: table-content;
}
.service-list li {
  position: relative;
  font-size: 17px;
  color: var(--bd-text-body);
  padding-left: 20px;
  margin-bottom: 10px;
}
.service-list li::before {
  position: absolute;
  left: -3px;
  font-size: 15px;
  top: 51%;
  transform: translateY(-50%);
  content: "+";
  font-family: var(--bd-ff-fontawesome);
}

.service-bottom {
  max-width: 880px;
  margin: auto;
}

.service-wrapper {
  display: flex;
  gap: 50px;
  flex-direction: column;
}
@media only screen and (min-width: 576px) {
  .service-wrapper {
    gap: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .service-wrapper {
    gap: 70px;
    flex-direction: row;
  }
}
@media only screen and (min-width: 992px) {
  .service-wrapper {
    gap: 120px;
    flex-direction: row;
  }
}
@media only screen and (min-width: 1200px) {
  .service-wrapper {
    gap: 160px;
    flex-direction: row;
  }
}

.service-img {
  flex: 0 0 auto;
  position: relative;
  transform: rotate(3deg);
  animation: 1s rotateScale forwards;
}
@media only screen and (min-width: 576px) {
  .service-img {
    margin: 0px 80px;
  }
}
@media only screen and (min-width: 768px) {
  .service-img {
    margin: 0px;
  }
}
.service-img a img {
  width: 100%;
}
.service-img .service-icon {
  height: 100px;
  width: 85px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-border-primary);
  border-radius: 43px;
  background-color: var(--bd-white);
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (min-width: 576px) {
  .service-img .service-icon {
    top: -20px;
    right: -42px;
  }
}
.service-img::before {
  content: "";
  position: absolute;
  height: 180px;
  width: 100%;
  background-color: var(--bd-primary);
  bottom: 0;
  left: -15px;
  transform: rotate(12deg);
  z-index: -1;
}

.seo-service-content {
  padding-right: 0px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .seo-service-content {
    padding-right: 0px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .seo-service-content {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .seo-service-content {
    padding-right: 150px;
    margin-bottom: 100px;
  }
}
.seo-service-content .section-title-two {
  margin-bottom: 30px;
}
.seo-service-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin: 0;
  max-width: inherit;
}
@media only screen and (min-width: 576px) {
  .seo-service-content p {
    margin: 0;
    max-width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .seo-service-content p {
    max-width: 400px;
    margin: auto -120px auto auto;
  }
}

.service-thumb {
  height: 70px;
  width: 230px;
  border-radius: 45px;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .service-thumb {
    height: 80px;
    width: 260px;
  }
}
.service-thumb::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  background-color: rgba(18, 18, 18, 0.15);
  transition: 0.35s;
}
.service-thumb img {
  width: 100%;
}

.circle-btn {
  height: 60px;
  width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-border-primary);
  border-radius: 50%;
  font-size: 20px;
}
@media only screen and (min-width: 576px) {
  .circle-btn {
    height: 80px;
    width: 80px;
  }
}
.circle-btn i {
  transition: 0.3s;
}

.service-single-inner {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 20px 0px;
  gap: 20px;
  border-top: 1px solid var(--bd-border-primary);
}
@media only screen and (min-width: 576px) {
  .service-single-inner {
    flex-direction: column;
    align-items: start;
    padding: 20px 0px;
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .service-single-inner {
    align-items: center;
    flex-direction: row;
    padding: 30px 0px;
    gap: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .service-single-inner {
    padding: 50px 0px;
  }
}
.service-single-inner:last-child {
  border-bottom: 1px solid var(--bd-border-primary);
}
.service-single-inner:hover .service-right {
  margin-left: 40px;
}
.service-single-inner:hover .service-title a {
  color: var(--bd-secondary);
}
.service-single-inner:hover .inner-list {
  color: var(--bd-secondary);
}
.service-single-inner:hover .circle-btn {
  background-color: var(--bd-secondary);
  color: var(--bd-black);
  border-color: var(--bd-secondary);
}
.service-single-inner:hover .circle-btn i {
  transform: rotate(-45deg);
}

.service-right {
  display: flex;
  align-items: center;
  margin-left: 0px;
  transition: 0.5s;
}
@media only screen and (min-width: 576px) {
  .service-right {
    margin-left: 70px;
  }
}

.inner-list {
  font: 400 18px var(--bd-ff-kanit-sans);
  width: 100%;
  transition: 0.3s;
}
@media only screen and (min-width: 576px) {
  .inner-list {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .inner-list {
    width: calc(13% - 65px);
  }
}

.service-title {
  font-family: var(--bd-ff-jakarta-sans);
  width: 100%;
}
@media (max-width: 575px) {
  .service-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) {
  .service-title {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .service-title {
    width: calc(20% - 10px);
  }
}
@media only screen and (min-width: 1200px) {
  .service-title {
    width: calc(25% - 10px);
  }
}
@media only screen and (min-width: 1400px) {
  .service-title {
    width: calc(32% - 10px);
  }
}
.service-title a {
  max-width: 100%;
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .service-title a {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .service-title a {
    max-width: 150px;
  }
}

.service-content {
  font: 18px var(--bd-ff-kanit-sans);
  width: 100%;
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .service-content {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .service-content {
    width: calc(30% - 10px);
  }
}

.seo-service-right {
  margin-top: 0px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .seo-service-right {
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .seo-service-right {
    margin-top: 40px;
    margin-bottom: 0;
  }
}
.seo-service-right p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .seo-service-right p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .seo-service-right p {
    font-size: 18px;
  }
}

.contact-btn a {
  font: 400 18px var(--bd-ff-kanit-sans);
  position: relative;
  display: inline-flex;
}
.contact-btn a:hover::before {
  width: 0;
  right: 0;
  left: auto;
}
.contact-btn a:hover span {
  opacity: 1;
  visibility: visible;
}
.contact-btn a::before {
  position: absolute;
  content: "";
  width: 90%;
  left: 0;
  bottom: 1px;
  height: 1px;
  background: var(--bd-black);
  transition: 0.3s;
}
.contact-btn a span {
  margin-left: 5px;
  display: inline-block;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  font-weight: 300;
}

.seo-bottom {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.seo-bottom ul {
  margin-bottom: 0;
}
.seo-bottom ul li {
  background-color: #DADADA;
  border-color: var(--bd-white);
}

.passion-area {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 350px;
  display: flex;
  align-items: end;
  padding-bottom: 60px;
}
@media only screen and (min-width: 576px) {
  .passion-area {
    min-height: 450px;
  }
}
@media only screen and (min-width: 1200px) {
  .passion-area {
    min-height: 650px;
  }
}
@media only screen and (min-width: 1400px) {
  .passion-area {
    min-height: 900px;
  }
}
.passion-area::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.3) 0%, rgba(18, 18, 18, 0.9) 82.31%);
}

.passion-title {
  font: 500 35px var(--bd-ff-jakarta-sans);
  max-width: 900px;
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .passion-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .passion-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .passion-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .passion-title {
    font-size: 90px;
  }
}

.service-title-wrapper {
  max-width: 650px;
}

.section-text-three p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}

.service-inner-title {
  font: 500 26px var(--bd-ff-epilogue-sans);
  color: #BBBBBB;
}
@media only screen and (min-width: 576px) {
  .service-inner-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .service-inner-title {
    font-size: 36px;
  }
}
.service-inner-title a:hover {
  color: var(--bd-primary);
}

.service-three-top {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .service-three-top {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .service-three-top {
    margin-top: 100px;
    margin-bottom: 120px;
  }
}

.service-single-item {
  padding: 37px 15px;
  border-top: 1px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  position: relative;
  z-index: 8;
  transition: 0.3s;
  gap: 20px;
}
@media only screen and (min-width: 576px) {
  .service-single-item {
    flex-direction: row;
    padding: 37px 0px;
    align-items: center;
  }
}
.service-single-item:last-child {
  border-bottom: 1px solid #E5E5E5;
}
.service-single-item:hover {
  background: #F8F8F8;
  border-color: #F8F8F8;
}
@media only screen and (min-width: 576px) {
  .service-single-item:hover {
    padding: 37px 40px;
  }
}
.service-single-item:hover .service-inner-title {
  color: var(--bd-black);
  font-style: italic;
}
.service-single-item:hover .service-brand {
  opacity: 1;
  visibility: visible;
}
.service-single-item:hover .service-hover-img {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%) rotate(0deg) scale(1);
}
.service-single-item:hover .service-arrow-btn {
  opacity: 1;
  visibility: visible;
  margin-left: -40px;
  color: var(--bd-black);
  background-color: var(--bd-primary);
}
@media (max-width: 575px) {
  .service-single-item:hover .service-arrow-btn {
    margin-left: 0px;
  }
}
.service-single-item:hover .service-arrow-btn i {
  transform: rotate(-45deg);
}
.service-single-item .service-hover-img {
  position: absolute;
  opacity: 0;
  transition: 0.5s;
  overflow: hidden;
  visibility: hidden;
  bottom: 0;
  margin: 0 -160px;
  pointer-events: none;
  transform: translate(-50%) rotate(0deg) scale(0);
  height: 150px;
  width: 250px;
  z-index: -1;
}
@media (max-width: 575px) {
  .service-single-item .service-hover-img {
    left: 0;
  }
}
@media only screen and (min-width: 768px) {
  .service-single-item .service-hover-img {
    height: 180px;
    width: 300px;
  }
}
.service-single-item .service-hover-img img {
  width: 100%;
  height: 100%;
}

.service-arrow-btn {
  color: #BBBBBB;
  font-size: 20px;
  height: 60px;
  width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 auto;
}
.service-arrow-btn:hover {
  background-color: var(--bd-black) !important;
  color: var(--bd-white) !important;
}
.service-arrow-btn i {
  transition: 0.3s;
}

.service-brand {
  transition: 0.45s;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media only screen and (min-width: 576px) {
  .service-brand {
    opacity: 0;
    visibility: hidden;
  }
}
.service-brand button {
  padding: 8px 15px;
  border-radius: 24px;
  background: var(--bd-primary);
  font: 400 14px var(--bd-ff-kanit-sans);
}

.service-item-left {
  display: flex;
  gap: 15px;
  flex-direction: column;
}
@media only screen and (min-width: 992px) {
  .service-item-left {
    flex-direction: row;
    gap: 60px;
  }
}

.shape-wrapper-two {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 7;
  display: none;
}
@media only screen and (min-width: 576px) {
  .shape-wrapper-two {
    display: block;
  }
}
.shape-wrapper-two .shape-bg-primary {
  position: absolute;
  top: -30px;
  left: -20px;
  animation: slide-left 2s linear 0s infinite alternate-reverse both;
}

.border-shape {
  position: absolute;
  top: 80px;
  height: 100px;
  width: 100px;
  right: -50px;
  border-radius: 50%;
  border: 1px solid #ECECEC;
}
@media only screen and (min-width: 768px) {
  .border-shape {
    height: 180px;
    width: 180px;
    right: -90px;
  }
}

.home-four-service-area .section-text-four {
  padding-right: 0px;
}
@media only screen and (min-width: 1200px) {
  .home-four-service-area .section-text-four {
    padding-right: 50px;
  }
}

.section-text-four p {
  font: 400 18px var(--bd-ff-outfit-sans);
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .section-text-four p {
    font-size: 20px;
  }
}

.service-project {
  padding: 20px;
  background-color: #F3F1ED;
  width: 220px;
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
  margin: auto;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .service-project {
    margin: 20px 0px 0px 0px;
  }
}
@media only screen and (min-width: 768px) {
  .service-project {
    margin-top: 0;
  }
}
.service-project h4 {
  font: 400 30px var(--bd-ff-bebas-sans);
}
@media only screen and (min-width: 768px) {
  .service-project h4 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .service-project h4 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-project h4 {
    font-size: 50px;
  }
}
.service-project p {
  font: 400 16px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .service-project p {
    font-size: 19px;
  }
}

.project-btn {
  margin-top: 90px;
}
@media only screen and (min-width: 992px) {
  .project-btn {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .project-btn {
    margin-top: 90px;
  }
}

.service-single-title {
  font: 400 24px/1.1 var(--bd-ff-bebas-sans);
  color: #BBBBBB;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 5%;
}
@media only screen and (min-width: 768px) {
  .service-single-title {
    font-size: 40px;
    align-items: start;
  }
}
@media only screen and (min-width: 1200px) {
  .service-single-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-single-title {
    font-size: 80px;
  }
}
.service-single-title span {
  font-size: 20px;
  color: var(--bd-black);
  margin-top: 0px;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .service-single-title span {
    margin-top: 3px;
  }
}
@media only screen and (min-width: 992px) {
  .service-single-title span {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-single-title span {
    margin-top: 10px;
  }
}

.service-four-btn .circle-btn {
  height: 60px;
  width: 60px;
  color: var(--bd-text-body);
}
.service-four-btn .circle-btn i {
  transform: rotate(-45deg);
}

.service-four-single-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
  padding: 15px;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  transition: 0.45s;
  z-index: 1;
}
.service-four-single-inner:first-child {
  border-top: 1px solid #E5E5E5;
}
@media only screen and (min-width: 768px) {
  .service-four-single-inner {
    flex-direction: row;
    padding: 36px 20px;
    align-items: center;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 992px) {
  .service-four-single-inner {
    padding: 36px 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-four-single-inner {
    padding: 36px 80px;
  }
}
.service-four-single-inner:hover {
  background-color: var(--bd-black);
  border-color: inherit;
}
.service-four-single-inner:hover .service-single-title {
  color: var(--bd-white);
}
.service-four-single-inner:hover .service-single-title span {
  color: var(--bd-tertiary);
}
.service-four-single-inner:hover .service-four-thumb {
  transform: translateY(-50%) scale(1);
}
.service-four-single-inner:hover .circle-btn {
  height: 60px;
  width: 60px;
  color: var(--bd-white);
  background-color: var(--bd-tertiary);
  border-color: var(--bd-tertiary);
}
.service-four-single-inner:hover .circle-btn i {
  transform: rotate(0deg);
}
.service-four-single-inner:hover .service-category {
  margin-left: 0;
  visibility: visible;
  opacity: 1;
}
.service-four-single-inner .service-four-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: 0.5s;
  right: 15px;
  overflow: hidden;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  z-index: 5;
}
@media only screen and (min-width: 576px) {
  .service-four-single-inner .service-four-thumb {
    right: 0px;
    height: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .service-four-single-inner .service-four-thumb {
    right: 150px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-four-single-inner .service-four-thumb {
    right: 200px;
    height: 320px;
    width: 320px;
  }
}

.service-four-wrapper {
  margin-top: 80px;
}
@media only screen and (min-width: 992px) {
  .service-four-wrapper {
    margin-top: 170px;
  }
}

.service-category {
  font: 500 12px var(--bd-ff-outfit-sans);
  color: var(--bd-white);
  padding: 5px 15px;
  border-radius: 24px;
  background-color: var(--bd-tertiary);
  display: inline-block;
  margin-left: 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) {
  .service-category {
    font-size: 14px;
    padding: 8px 20px;
  }
}

.service-four-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: start;
}
@media only screen and (min-width: 576px) {
  .service-four-left {
    flex-direction: row;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) {
  .service-four-left {
    flex-direction: column;
    gap: 10px;
    align-items: start;
  }
}
@media only screen and (min-width: 992px) {
  .service-four-left {
    flex-direction: row;
    align-items: center;
  }
}

.client-logo-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  border: 1px solid #E5E5E5;
  border-right: 0;
  border-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .client-logo-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 768px) {
  .client-logo-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

.client-logo-thumb {
  padding: 60px 0;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
.client-logo-thumb:hover img {
  opacity: 0.5;
}
@media only screen and (min-width: 1200px) {
  .client-logo-thumb {
    /* padding: 95px 0; */
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.client-logo-thumb img {
  width: 90px;
}
@media only screen and (min-width: 1200px) {
  .client-logo-thumb img {
    width: 120px;
  }
}
@media only screen and (min-width: 1600px) {
  .client-logo-thumb img {
    width: 150px;
  }
}

.client-container {
  max-width: 1600px;
}

.magnetic-wrap:last-child .case-item {
  margin-bottom: 0;
}

.case-item {
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: auto;
  margin-bottom: 30px;
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .case-item {
    width: 590px;
    height: 560px;
    margin-bottom: 100px;
  }
}
.case-item img {
  width: 100%;
}
.case-item .view-details-btn {
  height: 90px;
  width: 90px;
  gap: 2px;
  font: 400 14px var(--bd-ff-outfit-sans);
}
.case-item .view-details-btn:hover {
  background-color: var(--bd-tertiary);
  color: var(--bd-white);
}
.case-item:hover img {
  transform: scale(1.06);
}
.case-item:hover .view-details-btn {
  opacity: 1;
  visibility: visible;
}
.case-item:hover::before {
  opacity: 0.5;
  visibility: visible;
}

.case-title {
  font: 400 70px/1 var(--bd-ff-bebas-sans);
  flex: 0 0 auto;
}
@media only screen and (min-width: 768px) {
  .case-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) {
  .case-title {
    font-size: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-title {
    font-size: 280px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-title {
    font-size: 350px;
  }
}
.case-title span {
  color: #EAEAEA;
}

.marquee-text {
  animation-name: marquee 15s;
  animation: marquee 8s linear 0s infinite normal;
  animation-name: marquee;
  animation-play-state: running;
}

.marquee-text-inner {
  display: flex;
  gap: 80px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .marquee-text-inner {
    margin-bottom: 0;
  }
}

.case-bottom {
  margin-top: 10vh;
}
@media only screen and (min-width: 1200px) {
  .case-bottom {
    margin-top: 20vh;
  }
}
@media only screen and (min-width: 1400px) {
  .case-bottom {
    margin-top: 30vh;
  }
}
@media only screen and (min-width: 1600px) {
  .case-bottom {
    margin-top: 10vh;
  }
}

.service-agency {
  padding: 80px 0px;
  background: center/cover no-repeat;
}
@media only screen and (min-width: 992px) {
  .service-agency {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .service-agency {
    padding: 140px 0;
  }
}

.agency-expert-wrapper {
  padding: 40px 20px 20px 20px;
  margin: 0 0 0 auto;
  border-radius: 5px;
  background-color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .agency-expert-wrapper {
    padding: 60px 30px 30px 30px;
  }
}
@media only screen and (min-width: 768px) {
  .agency-expert-wrapper {
    padding: 80px 60px 50px 60px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-expert-wrapper {
    max-width: 600px;
    padding: 120px 60px 50px 60px;
  }
}

.agency-expert-title {
  font: 700 26px/1.1 var(--bd-ff-jakarta-sans);
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
  padding-left: 20px;
}
@media only screen and (min-width: 576px) {
  .agency-expert-title {
    padding-left: 50px;
    font-size: 38px;
  }
}
@media only screen and (min-width: 768px) {
  .agency-expert-title {
    padding-left: 50px;
    font-size: 40px;
    max-width: 400px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-expert-title {
    padding-left: 50px;
    font-size: 45px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .agency-expert-title {
    font-size: 48px;
  }
}
.agency-expert-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -25px;
  height: 100px;
  width: 100px;
  background-color: var(--bd-primary);
  border-radius: 50%;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .agency-expert-title::before {
    top: -20px;
    height: 120px;
    width: 120px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-expert-title::before {
    top: -60px;
    height: 200px;
    width: 200px;
  }
}

.skill-progress .progress-item {
  margin-bottom: 25px;
}
.skill-progress .progress-item .title {
  font: 600 16px var(--bd-ff-jakarta-sans);
}
.skill-progress .progress-bg {
  height: 5px;
  background-color: #D2D2D2;
}
.skill-progress .progress-fill {
  background-color: var(--bd-black);
}
.skill-progress .progress-number {
  font: 600 13px var(--bd-ff-kanit-sans);
}
.skill-progress .progress-number .percent {
  color: var(--bd-white);
  background-color: var(--bd-black);
  padding: 5px 8px;
  top: -10px;
  border-radius: 4px;
  left: -20px;
  position: absolute;
}
.skill-progress .progress-number .percent::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 1% 0, 100% 0);
  background-color: var(--bd-black);
}

@media only screen and (min-width: 1200px) {
  .service-digital-left {
    padding-right: 130px;
  }
}

.service-digital-right .section-text {
  max-width: 100%;
  margin: 30px 0 0 auto;
}
@media only screen and (min-width: 992px) {
  .service-digital-right .section-text {
    max-width: 370px;
  }
}

.digital-service-wrapper {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .digital-service-wrapper {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .digital-service-wrapper {
    margin-top: 100px;
  }
}

.digital-single-service {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E5E5E5;
  transition: 0.3s;
  padding: 10px;
  flex-direction: column;
  gap: 15px;
}
@media only screen and (min-width: 576px) {
  .digital-single-service {
    padding: 20px 25px;
  }
}
@media only screen and (min-width: 768px) {
  .digital-single-service {
    flex-direction: row;
    padding: 20px 15px;
    align-items: center;
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service {
    padding: 40px 0px;
  }
}
.digital-single-service:first-child {
  border-top: 1px solid #E5E5E5;
}
.digital-single-service:hover {
  background-color: var(--bd-black);
  border-color: var(--bd-black);
}
@media only screen and (min-width: 992px) {
  .digital-single-service:hover {
    padding: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service:hover {
    padding: 40px 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .digital-single-service:hover {
    padding: 40px 40px;
  }
}
.digital-single-service:hover h3 {
  color: var(--bd-white);
}
.digital-single-service:hover .digital-single-text p {
  color: var(--bd-text-secondary);
  opacity: 1;
  visibility: visible;
}
.digital-single-service:hover .service-arrow-btn {
  background-color: var(--bd-primary);
  color: var(--bd-black);
}
.digital-single-service:hover .service-arrow-btn i {
  transform: rotate(-45deg);
}
.digital-single-service h3 {
  font: 700 22px var(--bd-ff-jakarta-sans);
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .digital-single-service h3 {
    width: calc(45% - 10px);
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service h3 {
    width: calc(35% - 10px);
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service h3 {
    width: calc(30% - 10px);
  }
}
@media only screen and (min-width: 1400px) {
  .digital-single-service h3 {
    width: calc(30% - 10px);
    font-size: 36px;
  }
}
.digital-single-service h3 a:hover {
  color: var(--bd-primary);
}
.digital-single-service .digital-single-text {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .digital-single-service .digital-single-text {
    width: calc(62% - 10px);
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service .digital-single-text {
    width: calc(50% - 35px);
  }
}
@media only screen and (min-width: 1200px) {
  .digital-single-service .digital-single-text {
    width: calc(50% - 40px);
  }
}
@media only screen and (min-width: 1400px) {
  .digital-single-service .digital-single-text {
    width: calc(38% + 25px);
  }
}
@media only screen and (min-width: 1600px) {
  .digital-single-service .digital-single-text {
    width: calc(40% - 10px);
  }
}
.digital-single-service .digital-single-text p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .digital-single-service .digital-single-text p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .digital-single-service .digital-single-text p {
    font-size: 18px;
  }
}
.digital-single-service .service-arrow-btn:hover {
  background-color: var(--bd-white) !important;
  color: var(--bd-black) !important;
}

.testimonial-title-wrapper .section-title-two {
  font: 500 28px var(--bd-ff-jakarta-sans);
  letter-spacing: -5%;
  max-width: 450px;
}
@media only screen and (min-width: 576px) {
  .testimonial-title-wrapper .section-title-two {
    font-size: 38px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-title-wrapper .section-title-two {
    font-size: 46px;
    margin: auto;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-title-wrapper .section-title-two {
    font-size: 60px;
  }
}

.slider-content-two p {
  font: 500 20px var(--bd-ff-jakarta-sans);
}
@media (max-width: 575px) {
  .slider-content-two p {
    font-size: 18px;
    line-height: 1.67;
  }
}
.slider-content-two .author-name {
  font-family: var(--bd-ff-kanit-sans);
}
@media (max-width: 575px) {
  .slider-content-two .author-name {
    font-size: 20px;
  }
}
.slider-content-two .slider-bottom .designation {
  font-family: var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}

.service-review p {
  font: 500 18px var(--bd-ff-kanit-sans);
}

.provide-title-two {
  font: 500 32px var(--bd-ff-jakarta-sans);
  color: var(--bd-white);
  letter-spacing: -5%;
  margin-bottom: 30px;
  max-width: 500px;
}
@media only screen and (min-width: 576px) {
  .provide-title-two {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .provide-title-two {
    font-size: 40px;
    max-width: 400px;
  }
}
@media only screen and (min-width: 992px) {
  .provide-title-two {
    font-size: 45px;
    max-width: 500px;
  }
}
@media only screen and (min-width: 1200px) {
  .provide-title-two {
    font-size: 55px;
  }
}

.provide-content-two .provide-btn a {
  font-family: var(--bd-ff-jakarta-sans);
}

/*----------------------------------------*/
/*  8.13 Service css
/*----------------------------------------*/
.service-details-right p {
  font: 400 18px var(--bd-ff-kanit-sans);
}
.service-details-right .service-list li {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-black);
}
@media (max-width: 575px) {
  .service-details-right .service-list li {
    font-size: 16px;
  }
}

.service-details-left span {
  font: 400 16px var(--bd-ff-kanit-sans);
  display: inline-block;
  margin-bottom: 10px;
}

.service-details-title {
  font: 600 26px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .service-details-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .service-details-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-details-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-details-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 1200px) {
  .service-details-left {
    padding-right: 150px;
  }
}

.service-details-content {
  margin-bottom: 80px;
}

.workflow-single-inner:hover .workflow-title::before {
  right: auto;
  left: 0;
  width: 100%;
}
.workflow-single-inner:hover .workflow-list {
  color: var(--bd-primary);
}
.workflow-single-inner .workflow-list {
  font: 400 20px var(--bd-ff-kanit-sans);
  display: inline-block;
  margin-bottom: 15px;
}
.workflow-single-inner .workflow-title {
  font: 600 22px var(--bd-ff-jakarta-sans);
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .workflow-single-inner .workflow-title {
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .workflow-single-inner .workflow-title {
    padding-bottom: 25px;
    margin-bottom: 25px;
    font-size: 30px;
  }
}
.workflow-single-inner .workflow-title::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: auto;
  right: 0;
  height: 1px;
  width: 0;
  background-color: var(--bd-black);
  transition: 0.3s;
}
.workflow-single-inner p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 0;
}

.workflow-wrapper {
  position: relative;
  margin-top: 80px;
}
@media only screen and (min-width: 768px) {
  .workflow-wrapper {
    margin-top: 100px;
  }
}
.workflow-wrapper .workflow-line {
  border-bottom: 1px solid var(--bd-text-secondary);
  position: absolute;
  left: 0;
  top: 113px;
  width: 100%;
  z-index: -1;
  display: none;
}
@media only screen and (min-width: 992px) {
  .workflow-wrapper .workflow-line {
    display: block;
    top: 119px;
  }
}
@media only screen and (min-width: 1200px) {
  .workflow-wrapper .workflow-line {
    top: 137px;
  }
}

.service-workflow-right .section-text p {
  margin-bottom: 0;
}

@media only screen and (min-width: 1200px) {
  .service-workflow-left {
    padding-right: 100px;
  }
}

@media only screen and (min-width: 1400px) {
  .service-business-right {
    padding: 0 0 0 50px;
  }
}
@media only screen and (min-width: 1600px) {
  .service-business-right {
    padding: 0 100px 0 50px;
  }
}
.service-business-right .service-details-title {
  margin-bottom: 20px;
}
.service-business-right p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

@media only screen and (min-width: 1600px) {
  .service-business-thumb {
    margin-left: -420px;
    padding-right: 50px;
  }
}
.service-business-thumb img {
  width: 100%;
}

.service-business-list li {
  font: 400 18px var(--bd-ff-kanit-sans);
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.service-business-list li::before {
  position: absolute;
  left: -3px;
  font-size: 15px;
  top: 51%;
  transform: translateY(-50%);
  content: "\f00c";
  font-family: var(--bd-ff-fontawesome);
  font-weight: 700;
}

.error-thumb {
  text-align: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) {
  .error-thumb {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .error-thumb {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .error-thumb {
    margin-bottom: 100px;
  }
}

.error-btn {
  text-align: center;
}

/*----------------------------------------*/
/*  8.17 testimonial css
/*----------------------------------------*/
.testimonial-area {
  background: #F5F5F5;
}

.testimonial-title-wrapper {
  margin-bottom: 0px;
}
@media only screen and (min-width: 576px) {
  .testimonial-title-wrapper {
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-title-wrapper {
    margin-bottom: 90px;
  }
}

.testimonial-title-wrapper .section-title {
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .testimonial-title-wrapper .section-title {
    max-width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-title-wrapper .section-title {
    max-width: 500px;
  }
}

.testimonial-review p {
  margin-bottom: 10px;
}

.slider-bottom {
  font-size: 20px;
}
@media only screen and (min-width: 576px) {
  .slider-bottom {
    font-size: 24px;
  }
}
.slider-bottom .designation {
  font-size: 16px;
  color: black;
  font-weight: 400;
}

.slider-content {
  padding: 0px;
}
@media only screen and (min-width: 576px) {
  .slider-content {
    padding: 0px;
  }
}
@media only screen and (min-width: 992px) {
  .slider-content {
    padding: 0px 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .slider-content {
    padding: 0px 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .slider-content {
    padding: 0px 70px;
  }
}
.slider-content .quote-icon {
  margin-bottom: 20px;
}

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

.slider_pagination .swiper-pagination-bullet {
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--bd-text-secondary);
  color: var(--bd-text-body);
  margin: 0px 5px 0ox 0px !important;
  background-color: #F5F5F5;
  opacity: 1;
}
.slider_pagination .swiper-pagination-bullet-active {
  color: var(--bd-black);
  border-color: var(--bd-black);
}
.slider_pagination .swiper-pagination {
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: end;
}

.testimonial-style-two {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.testimonial-style-two::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  background: linear-gradient(270deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.6) 82.31%);
}

.testimonial-wrapper-two {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: 11px;
  margin-right: 0px;
  position: relative;
  height: 100%;
}
@media only screen and (min-width: 576px) {
  .testimonial-wrapper-two {
    margin-right: 0px;
    border-radius: 11px;
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-wrapper-two {
    padding: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-wrapper-two {
    margin-right: 0px;
    border-radius: 0px 11px 0px 0px;
    padding: 50px 30px 100px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-wrapper-two {
    margin-right: 0px;
    padding: 90px 90px 60px 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-wrapper-two {
    margin-right: 60px;
  }
}
.testimonial-wrapper-two::before {
  position: absolute;
  content: "";
  left: -100%;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
}
@media only screen and (min-width: 576px) {
  .testimonial-wrapper-two::before {
    width: 0;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-wrapper-two::before {
    width: 100%;
  }
}

.avatar-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 35px;
  border-top: 1px solid var(--bd-text-body);
}
.avatar-wrapper .avatar-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #A8A8A8;
  border: 1px solid #A8A8A8;
  overflow: hidden;
}

.testimonial-single-inner .quote-icon {
  font-size: 50px;
  color: #A8A8A8;
  margin-bottom: 10px;
}
.testimonial-single-inner p {
  font: 500 18px/1.65 var(--bd-ff-jakarta-sans);
  color: var(--bd-white);
  max-width: 600px;
}
@media only screen and (min-width: 576px) {
  .testimonial-single-inner p {
    font-size: 20px;
  }
}

.avatar-content h5 {
  font-family: var(--bd-ff-jakarta-sans);
  color: var(--bd-white);
  margin-bottom: 3px;
}
.avatar-content .designation {
  color: #A8A8A8;
  font: 400 16px var(--bd-ff-kanit-sans);
}

.navigation__wrapper.testimonial-navigation {
  justify-content: center;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .navigation__wrapper.testimonial-navigation {
    justify-content: end;
  }
}
.navigation__wrapper.testimonial-navigation button {
  border: 1px solid #A8A8A8;
  background-color: transparent;
  color: #A8A8A8;
}
.navigation__wrapper.testimonial-navigation button:hover {
  background-color: var(--bd-secondary);
  border-color: var(--bd-secondary);
  color: var(--bd-black);
}

@media only screen and (min-width: 768px) {
  .testimonial-two-content {
    max-width: 600px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-two-content {
    padding-left: 30px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-two-content {
    padding: 0 20px 140px 100px;
  }
}
.testimonial-two-content p {
  color: var(--bd-text-secondary);
}

.clients-review-content {
  padding-top: 15px;
}
.clients-review-content h2 {
  font: 600 60px/1 var(--bd-ff-kanit-sans);
  color: transparent;
  -webkit-text-stroke: 1px var(--bd-secondary);
  stroke-width: 2px;
}
@media only screen and (min-width: 576px) {
  .clients-review-content h2 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .clients-review-content h2 {
    font-size: 100px;
  }
}
.clients-review-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
  color: var(--bd-text-secondary);
  margin-bottom: 0;
}

.border-line {
  border-bottom: 1px solid #E5E5E5;
}

.quote-icon-two {
  height: 285px;
  width: 285px;
  border: 45px solid #F0F0F0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  background: #F6F6F6;
}
.quote-icon-two .test-avata-thumb {
  position: absolute;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 5px solid #E5E5E5;
  overflow: hidden;
}
.quote-icon-two .test-avata-one {
  top: -20px;
  left: -50px;
}
.quote-icon-two .test-avata-two {
  top: -20px;
  right: -50px;
}
.quote-icon-two .test-avata-three {
  bottom: -20px;
  left: -50px;
}
.quote-icon-two .test-avata-four {
  bottom: -20px;
  right: -50px;
}

.testimonial-author {
  font: 500 20px var(--bd-ff-epilogue-sans);
  margin-bottom: 3px;
}

.testimonial-bottom span {
  font: 400 16px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-body);
}

.testimonial-single-card .testimonial-content p {
  font: 500 24px/1.3 var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .testimonial-single-card .testimonial-content p {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-single-card .testimonial-content p {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-single-card .testimonial-content p {
    font-size: 32px;
  }
}

@media only screen and (min-width: 992px) {
  .tesmonial-slider-three {
    margin-left: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .tesmonial-slider-three {
    margin-left: 80px;
  }
}

.testimonial_pagintion .swiper-pagination {
  display: flex;
  justify-content: end;
}
.testimonial_pagintion .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  background-color: var(--bd-text-secondary);
  border-radius: 50%;
  opacity: 1;
  margin: 0 12px 0 0 !important;
}
.testimonial_pagintion .swiper-pagination-bullet-active {
  background-color: var(--bd-primary);
  position: relative;
}
.testimonial_pagintion .swiper-pagination-bullet-active::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border: 1px solid var(--bd-text-secondary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.home-three-brand {
  padding-top: 80px;
}
@media only screen and (min-width: 768px) {
  .home-three-brand {
    padding-top: 100px;
  }
}

.home-four-testimonial-area {
  padding: 80px 0px;
  background: center/cover no-repeat;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .home-four-testimonial-area {
    padding: 100px 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .home-four-testimonial-area {
    padding: 100px 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .home-four-testimonial-area {
    padding: 200px 0px;
  }
}
.home-four-testimonial-area::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bd-black);
  opacity: 0.75;
  z-index: -1;
}

.testimonial-style-four {
  text-align: center;
}

.testimonial-single-slide {
  padding: 0px;
  margin-top: 0px;
}
@media only screen and (min-width: 992px) {
  .testimonial-single-slide {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-single-slide {
    padding: 0px 80px;
  }
}
.testimonial-single-slide p {
  font: 400 24px var(--bd-ff-outfit-sans);
  color: var(--bd-white);
}
@media only screen and (min-width: 768px) {
  .testimonial-single-slide p {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-single-slide p {
    font-size: 35px;
  }
}

.testimonial-four-avatar {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.testimonial-four-avatar .avatar-thumb {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--bd-white);
}
.testimonial-four-avatar .avatar-content {
  text-align: start;
}
.testimonial-four-avatar .avatar-content h5 {
  font: 500 18px var(--bd-ff-outfit-sans);
  color: var(--bd-white);
  margin-bottom: 7px;
}
@media only screen and (min-width: 576px) {
  .testimonial-four-avatar .avatar-content h5 {
    font-size: 20px;
  }
}
.testimonial-four-avatar .avatar-content .designation {
  font: 400 14px var(--bd-ff-outfit-sans);
  display: inline-block;
  padding: 5px 16px;
  color: var(--bd-white);
  border: 1px solid #9F9F9F;
  border-radius: 24px;
}

.testimonial-four-navigation {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}
@media only screen and (min-width: 992px) {
  .testimonial-four-navigation {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    writing-mode: vertical-lr;
    transform: scale(-1);
    gap: 30px;
    margin-top: 0;
    position: absolute;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-four-navigation {
    right: 0px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial-four-navigation {
    right: -100px;
  }
}
.testimonial-four-navigation button {
  color: #949494;
  font-size: 30px;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .testimonial-four-navigation button {
    font-size: 40px;
  }
}
.testimonial-four-navigation button:hover {
  color: var(--bd-white);
}
@media only screen and (min-width: 992px) {
  .testimonial-four-navigation .testimonial_button_next {
    transform: rotate(90deg);
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-four-navigation .testimonial_button_prev {
    transform: rotate(90deg);
  }
}

.about-testimonial-area {
  padding: 80px 0px;
  background-color: var(--bd-primary);
  position: relative;
  z-index: -1;
}
.about-testimonial-area .testimonial-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  background: center/cover no-repeat;
  z-index: -1;
}
@media (max-width: 575px) {
  .about-testimonial-area .testimonial-bg-img {
    width: 100%;
  }
}

.about-testimonial-wrapper {
  padding: 20px;
  box-shadow: 17px 4px 24px 5px rgba(0, 0, 1, 0.0509803922);
  border-radius: 11px;
  background-color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .about-testimonial-wrapper {
    padding: 40px 30px;
  }
}
@media only screen and (min-width: 768px) {
  .about-testimonial-wrapper {
    padding: 50px 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-testimonial-wrapper {
    padding: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-testimonial-wrapper {
    padding: 80px 100px;
  }
}
.about-testimonial-wrapper .testimonial-single-inner p {
  color: var(--bd-black);
  max-width: 100%;
}
.about-testimonial-wrapper .avatar-wrapper {
  border-color: #CECECE;
}
.about-testimonial-wrapper .avatar-wrapper .avatar-name {
  color: var(--bd-black);
}
.about-testimonial-wrapper .avatar-wrapper .designation {
  color: var(--bd-text-body);
}
.about-testimonial-wrapper .navigation__wrapper.testimonial-navigation button {
  color: var(--bd-text-body);
  border-color: var(--bd-text-body);
}
.about-testimonial-wrapper .navigation__wrapper.testimonial-navigation button:hover {
  color: var(--bd-black);
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

/*----------------------------------------*/
/*  8.9 Feture css
/*----------------------------------------*/
.featured-single {
  position: relative;
  padding-right: 30px;
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
  .featured-single {
    margin-bottom: 80px;
    padding-right: 60px;
  }
}

.feature-top {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .feature-top {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-top {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-top {
    margin-bottom: 40px;
  }
}
.feature-top .section-top-content {
  margin-bottom: 30px;
}
.feature-top .feature-text p {
  margin-bottom: 0;
}

.featured-img {
  margin-bottom: 20px;
  position: relative;
}
.featured-img::before {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 15, 15, 0.24) 0%, rgba(15, 15, 15, 0.24) 100%), rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: 0.5s;
  z-index: 1;
  opacity: 0;
}
.featured-img:hover::before {
  opacity: 1;
}
.featured-img:hover .view-details-btn {
  opacity: 1;
}
.featured-img .featured-date {
  position: absolute;
  right: -30px;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .featured-img .featured-date {
    right: -60px;
  }
}
.featured-img img {
  width: 100%;
}

.view-details-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  place-content: center;
  gap: 4px;
  background-color: var(--bd-white);
  color: var(--bd-black);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.01) 0px 18px 36px -18px inset;
}
@media only screen and (min-width: 992px) {
  .view-details-btn {
    width: 120px;
    height: 120px;
    font-size: 16px;
  }
}
.view-details-btn i {
  transform: rotate(-45deg);
}
.view-details-btn:hover {
  background-color: var(--bd-primary);
}

.featured-date {
  width: 30px;
  height: 100px;
  background-color: var(--bd-gray);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
@media only screen and (min-width: 768px) {
  .featured-date {
    width: 60px;
    height: 165px;
  }
}
.featured-date span {
  transform: rotate(-90deg);
  display: inline-block;
  position: relative;
}
.featured-date span::before {
  content: "";
  position: absolute;
  height: 1.3px;
  width: 30px;
  background-color: var(--bd-black);
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .featured-date span::before {
    left: 55px;
  }
}

.featured-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 576px) {
  .featured-content {
    flex-direction: column;
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-content {
    justify-content: space-between;
    flex-direction: row;
  }
}

.featured-title {
  font-size: 20px;
  max-width: 300px;
}
@media only screen and (min-width: 576px) {
  .featured-title {
    font-size: 28px;
    max-width: inherit;
  }
}
@media only screen and (min-width: 768px) {
  .featured-title {
    max-width: 300px;
  }
}
.featured-title span {
  font-weight: 300;
  font-style: italic;
}
.featured-title a:hover {
  color: var(--bd-primary);
}

.feature-category ul {
  display: flex;
  gap: 30px;
  align-items: center;
}
.feature-category ul li {
  position: relative;
  padding-left: 7px;
  font-size: 14px;
}
@media only screen and (min-width: 576px) {
  .feature-category ul li {
    font-size: 16px;
  }
}
.feature-category ul li::before {
  content: "";
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #8D8D8D;
}

.feature-btn {
  text-align: center;
}

.provide-area {
  padding: 80px 0px;
  position: relative;
  background: center/cover no-repeat;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .provide-area {
    padding: 80px 0px;
  }
}
@media only screen and (min-width: 992px) {
  .provide-area {
    padding: 100px 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .provide-area {
    padding: 220px 0px;
  }
}
.provide-area::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background-color: rgba(85, 85, 85, 0.55);
}

.provide-bg-two::before {
  background-color: rgba(18, 18, 18, 0.65);
}

.video-btn {
  position: relative;
  display: inline-block;
}
.video-btn::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: var(--bd-white);
  border-radius: 50%;
  animation-name: popupBtn;
  animation-duration: 1.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.video-play-btn {
  font-size: 24px;
  color: var(--bd-black);
  height: 80px;
  width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-white);
  border-radius: 50%;
  position: relative;
  z-index: 7;
}
.video-play-btn:hover {
  background-color: var(--bd-primary);
}

.provide-video {
  text-align: center;
}

.provide-content {
  padding-left: 0px;
}
@media only screen and (min-width: 576px) {
  .provide-content {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .provide-content {
    padding-left: 50px;
  }
}

.logo-icon {
  margin-bottom: 20px;
}

.provide-title {
  font-size: 35px;
  color: var(--bd-white);
  font-weight: 400;
  letter-spacing: 0.8px;
  margin-bottom: 30px;
  max-width: 500px;
}
@media only screen and (min-width: 576px) {
  .provide-title {
    font-size: 46px;
  }
}
@media only screen and (min-width: 768px) {
  .provide-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) {
  .provide-title {
    font-size: 50px;
  }
}

.provide-btn a {
  font-size: 14px;
  font-weight: 500;
  color: var(--bd-white);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}
.provide-btn a span {
  display: inline-block;
  margin-left: 3px;
}
.provide-btn a:hover::after {
  width: 88%;
}
.provide-btn a::before {
  position: absolute;
  content: "";
  width: 88%;
  left: 0;
  bottom: -2px;
  height: 2px;
  background: var(--bd-primary);
  transition: 0.3s;
}
.provide-btn a::after {
  position: absolute;
  content: "";
  width: 0;
  left: 0;
  bottom: -2px;
  height: 2px;
  background: var(--bd-white);
  transition: 0.3s;
}

.agency-area {
  background-color: var(--bd-black);
  position: relative;
  z-index: 2;
}
.agency-area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #111111 0%, #111111 86.79%);
  z-index: -1;
}
.agency-area .agency-shape {
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  z-index: -1;
}

.agency-img-wrapper .agency-title {
  font: 400 20px var(--bd-ff-kanit-sans);
  text-transform: uppercase;
  color: var(--bd-secondary);
  writing-mode: vertical-lr;
  flex: 0 0 auto;
  padding: 0px;
  margin-bottom: 45px;
  transform: scale(-1);
}
@media only screen and (min-width: 576px) {
  .agency-img-wrapper .agency-title {
    font-size: 26px;
    padding: 0px 15px;
    margin-bottom: 85px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-img-wrapper .agency-title {
    font-size: 20px;
    padding: 0px;
    margin-bottom: 45px;
  }
}
@media only screen and (min-width: 1400px) {
  .agency-img-wrapper .agency-title {
    font-size: 26px;
    padding: 0px 15px;
    margin-bottom: 85px;
  }
}

.agency-img-wrapper {
  display: flex;
  gap: 0px;
  margin-left: 0px;
}
@media only screen and (min-width: 576px) {
  .agency-img-wrapper {
    margin-left: 0px;
    justify-content: center;
  }
}
@media only screen and (min-width: 1600px) {
  .agency-img-wrapper {
    margin-left: -120px;
    justify-content: start;
  }
}
@media only screen and (min-width: 1750px) {
  .agency-img-wrapper {
    margin-left: -180px;
  }
}

.agency-single-img-two {
  margin-top: 45px;
}
@media only screen and (min-width: 576px) {
  .agency-single-img-two {
    margin-top: 85px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-single-img-two {
    margin-top: 45px;
  }
}
@media only screen and (min-width: 1400px) {
  .agency-single-img-two {
    margin-top: 85px;
  }
}

.agency-content-wrapper {
  padding-left: 0px;
}
@media only screen and (min-width: 576px) {
  .agency-content-wrapper {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 576px) {
  .agency-content-wrapper {
    padding-left: 0px;
    max-width: 500px;
  }
}
@media only screen and (min-width: 1200px) {
  .agency-content-wrapper {
    padding-left: 30px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1400px) {
  .agency-content-wrapper {
    padding-left: 70px;
  }
}
.agency-content-wrapper .section-title-two {
  margin-bottom: 20px;
}
.agency-content-wrapper p {
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-bottom: 35px;
  padding-right: 0px;
}
@media only screen and (min-width: 576px) {
  .agency-content-wrapper p {
    padding-right: 80px;
  }
}

.agency-btn a {
  padding: 13px 29px;
  font: 400 16px var(--bd-ff-kanit-sans);
  border: 1px solid var(--bd-white);
  border-radius: 3px;
  color: var(--bd-white);
  text-transform: uppercase;
  display: inline-flex;
}
.agency-btn a:hover {
  background-color: var(--bd-secondary);
  border-color: var(--bd-secondary);
  color: var(--bd-black);
}

.agency-right-content {
  padding-left: 0px;
}
@media (max-width: 575px) {
  .agency-right-content {
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 576px) {
  .agency-right-content {
    padding-left: 0px;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 992px) {
  .agency-right-content {
    padding-left: 30px;
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
  .agency-right-content {
    padding-left: 90px;
  }
}
.agency-right-content .team-list {
  margin-bottom: 0px;
}
@media only screen and (min-width: 576px) {
  .agency-right-content .team-list {
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 992px) {
  .agency-right-content .team-list {
    margin-bottom: 100px;
  }
}
.agency-right-content .team-list ul li {
  background-color: var(--bd-white);
  border-color: var(--bd-black);
}

.experience-wrapper {
  position: relative;
}
.experience-wrapper h2 {
  font: 600 70px/1 var(--bd-ff-kanit-sans);
  color: transparent;
  -webkit-text-stroke: 1px var(--bd-secondary);
  stroke-width: 2px;
  display: inline-flex;
}
@media only screen and (min-width: 576px) {
  .experience-wrapper h2 {
    font-size: 100px;
  }
}
.experience-wrapper p {
  background-color: var(--bd-black);
  top: 40px;
  color: var(--bd-text-secondary);
  font-family: var(--bd-ff-kanit-sans);
}

.feature-large-title {
  font: 600 48px var(--bd-ff-epilogue-sans);
  color: var(--bd-white);
}
@media (max-width: 575px) {
  .feature-large-title {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) {
  .feature-large-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .feature-large-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-large-title {
    font-size: 100px;
  }
}

.feature-two-area {
  background-color: var(--bd-black);
}

.feature-two-top-content {
  max-width: 500px;
  margin: auto;
  text-align: center;
}
.feature-two-top-content p {
  color: var(--bd-white);
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) {
  .feature-two-top-content p {
    margin-bottom: 50px;
  }
}

.feature-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 100px 10px;
  position: relative;
  align-items: center;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .feature-list {
    grid-template-columns: 1fr;
    gap: 15px 10px;
  }
}
@media only screen and (min-width: 576px) {
  .feature-list {
    gap: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .feature-list {
    gap: 20px 30px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-list {
    gap: 20px 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-list {
    gap: 10px 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-list {
    gap: 100px 10px;
  }
}

.feature-item {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  scale: 0.5;
  opacity: 0;
  overflow: hidden;
}
.feature-item:nth-child(2n) {
  text-align: end;
}
.feature-item img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .feature-item img {
    width: inherit;
  }
}

.feature-btn-two {
  text-align: center;
}
.feature-btn-two .theme-btn .icon-box {
  background-color: var(--bd-text-secondary);
  color: #222222;
  border-color: #454545;
}
.feature-btn-two .theme-btn .text-content {
  background-color: var(--bd-text-secondary);
  color: #222222;
}
.feature-btn-two .theme-btn:hover .icon-box {
  background-color: var(--bd-primary);
  color: var(--bd-black);
  border-color: var(--bd-white);
}
.feature-btn-two .theme-btn:hover .text-content {
  background-color: var(--bd-primary);
  color: var(--bd-black);
}

.feature-bottom {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .feature-bottom {
    margin-top: 60vh;
  }
}
@media only screen and (min-width: 992px) {
  .feature-bottom {
    margin-top: 75vh;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bottom {
    margin-top: 80vh;
  }
}

.home-four-feature-area {
  background-color: #F3F1ED;
}

.feature-four-top-content {
  padding-right: 0px;
}
@media only screen and (min-width: 992px) {
  .feature-four-top-content {
    padding-right: 140px;
  }
}
.feature-four-top-content .section-text-four {
  max-width: 100%;
  margin: 15px 0 0 auto;
}
@media only screen and (min-width: 992px) {
  .feature-four-top-content .section-text-four {
    margin: 20px 0 0 auto;
    max-width: 350px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-four-top-content .section-text-four {
    margin: 30px 0 0 auto;
    max-width: 350px;
  }
}

.feature-brand-wrapper {
  padding: 30px 30px 20px 30px;
  background-color: var(--bd-white);
  border-radius: 13px;
}
@media only screen and (min-width: 1200px) {
  .feature-brand-wrapper {
    padding: 20px 20px 10px 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-brand-wrapper {
    padding: 30px 30px 20px 30px;
  }
}
.feature-brand-wrapper h6 {
  font: 500 18px var(--bd-ff-outfit-sans);
  margin-bottom: 20px;
}
.feature-brand-wrapper a {
  display: inline-block;
  font: 400 12px var(--bd-ff-outfit-sans);
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 24px;
  border: 1px solid #E5E5E5;
  margin: 0px 5px 10px 0px;
}
@media only screen and (min-width: 1200px) {
  .feature-brand-wrapper a {
    padding: 10px 15px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-brand-wrapper a {
    padding: 10px 20px;
  }
}
.feature-brand-wrapper a:hover {
  background-color: var(--bd-tertiary);
  border-color: var(--bd-tertiary);
  color: var(--bd-white);
}

.feature-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
}
@media only screen and (min-width: 576px) {
  .feature-items {
    justify-content: center;
  }
}
@media only screen and (min-width: 992px) {
  .feature-items {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-items {
    gap: 60px;
    flex-wrap: nowrap;
    justify-content: start;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-items {
    margin-top: 60px;
  }
}

.single-featur-content {
  padding: 20px 20px 10px 20px;
  background-color: var(--bd-white);
  border-radius: 13px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .single-featur-content {
    width: 240px;
  }
}
@media only screen and (min-width: 768px) {
  .single-featur-content {
    width: 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-featur-content {
    padding: 40px 40px 30px 40px;
    width: 400px;
  }
}
.single-featur-content .feature-content-list {
  font: 400 90px var(--bd-ff-bebas-sans);
  color: #F3F1ED;
  position: absolute;
  bottom: -52PX;
  right: 20px;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .single-featur-content .feature-content-list {
    font-size: 128px;
    bottom: -75PX;
  }
}
.single-featur-content span {
  font: 400 20px var(--bd-ff-bebas-sans);
  color: var(--bd-tertiary);
  display: inline-block;
  margin-bottom: 30px;
}
.single-featur-content h4 {
  font: 400 25px var(--bd-ff-bebas-sans);
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .single-featur-content h4 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-featur-content h4 {
    font-size: 36px;
  }
}
.single-featur-content p {
  font: 400 16px var(--bd-ff-outfit-sans);
}
@media only screen and (min-width: 768px) {
  .single-featur-content p {
    font-size: 18px;
  }
}

.feature-gallery-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--transparent-bg);
  height: 350px;
}
@media only screen and (min-width: 576px) {
  .feature-gallery-content-wrapper {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .feature-gallery-content-wrapper {
    height: 380px;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .feature-gallery-content-wrapper {
    height: 300px;
    width: 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-gallery-content-wrapper {
    height: 420px;
    width: 100%;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-gallery-content-wrapper {
    height: 350px;
  }
}

.feature-gallery-content h2 {
  font: 700 60px/1.1 var(--bd-ff-bebas-sans);
  color: var(--bd-tertiary);
}
@media only screen and (min-width: 768px) {
  .feature-gallery-content h2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-gallery-content h2 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-gallery-content h2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-gallery-content h2 {
    font-size: 70px;
  }
}
.feature-gallery-content h2 span {
  color: var(--bd-black);
}
.feature-gallery-content p {
  font: 700 24px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
  max-width: 150px;
  margin-top: -5px;
}
@media only screen and (min-width: 1600px) {
  .feature-gallery-content p {
    font-size: 22px;
    max-width: 200px;
    margin-top: 3px;
  }
}

.feature-gallery {
  display: grid;
  grid-template-columns: auto;
}
@media only screen and (min-width: 992px) {
  .feature-gallery {
    grid-template-columns: auto auto auto;
  }
}

.feature-gallery-single {
  position: relative;
}
@media only screen and (min-width: 576px) {
  .feature-gallery-single:last-child {
    flex-direction: column;
  }
}
@media only screen and (min-width: 576px) {
  .feature-gallery-single:last-child .feature-gallery-img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .feature-gallery-single:last-child .feature-gallery-content-wrapper {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .feature-gallery-single {
    display: flex;
  }
}
@media only screen and (min-width: 992px) {
  .feature-gallery-single {
    display: inherit;
  }
}
.feature-gallery-single .funding-wrapper {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 576px) {
  .feature-gallery-single .funding-wrapper {
    top: 50%;
  }
}

@media only screen and (min-width: 576px) {
  .feature-gallery-img {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .feature-gallery-img {
    height: 380px;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .feature-gallery-img {
    height: 300px;
    width: 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-gallery-img {
    height: 420px;
    width: 100%;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-gallery-img {
    height: 350px;
  }
}
.feature-gallery-img img {
  width: 100%;
  height: 100%;
}

.feature-bar {
  display: flex;
  align-items: end;
  gap: 10px;
}

.feature-bar-wrapper {
  align-items: end;
  padding-bottom: 25px;
}

.feature-bar-single-inner {
  height: 120px;
  width: 70px;
  background-color: var(--bd-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
}
@media only screen and (min-width: 576px) {
  .feature-bar-single-inner {
    width: 90px;
    padding: 20px 10px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-bar-single-inner {
    width: 80px;
    padding: 15px 10px;
    height: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bar-single-inner {
    padding: 20px 15px;
    height: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-bar-single-inner {
    width: 110px;
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-bar-single-inner {
    width: 120px;
  }
}
.feature-bar-single-inner:nth-child(2) {
  height: 180px;
}
@media only screen and (min-width: 576px) {
  .feature-bar-single-inner:nth-child(2) {
    height: 175px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-bar-single-inner:nth-child(2) {
    padding: 15px 10px;
    height: 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bar-single-inner:nth-child(2) {
    width: 80px;
    padding: 20px 15px;
    height: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-bar-single-inner:nth-child(2) {
    width: 110px;
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-bar-single-inner:nth-child(2) {
    width: 120px;
  }
}
.feature-bar-single-inner:nth-child(3) {
  height: 240px;
}
@media only screen and (min-width: 576px) {
  .feature-bar-single-inner:nth-child(3) {
    height: 235px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-bar-single-inner:nth-child(3) {
    padding: 15px 10px;
    height: 160px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bar-single-inner:nth-child(3) {
    width: 80px;
    padding: 20px 15px;
    height: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-bar-single-inner:nth-child(3) {
    width: 110px;
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-bar-single-inner:nth-child(3) {
    width: 120px;
  }
}
.feature-bar-single-inner:nth-child(4) {
  height: 300px;
  background-color: var(--bd-primary);
}
@media only screen and (min-width: 576px) {
  .feature-bar-single-inner:nth-child(4) {
    height: 295px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-bar-single-inner:nth-child(4) {
    width: 80px;
    padding: 15px 10px;
    height: 190px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bar-single-inner:nth-child(4) {
    padding: 20px 15px;
    height: 240px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-bar-single-inner:nth-child(4) {
    width: 110px;
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-bar-single-inner:nth-child(4) {
    width: 120px;
  }
}
.feature-bar-single-inner h4 {
  font: 700 18px var(--bd-ff-bebas-sans);
}
@media only screen and (min-width: 576px) {
  .feature-bar-single-inner h4 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-bar-single-inner h4 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-bar-single-inner h4 {
    font-size: 24px;
  }
}
.feature-bar-single-inner p {
  font: 400 14px var(--bd-ff-outfit-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}

.funding-wrapper {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: var(--bd-white);
  border: 8px solid #F3F1ED;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 576px) {
  .funding-wrapper {
    height: 200px;
    width: 200px;
    border: 10px solid #F3F1ED;
  }
}
@media only screen and (min-width: 1600px) {
  .funding-wrapper {
    gap: 10px;
    height: 220px;
    width: 220px;
    border: 13px solid #F3F1ED;
  }
}
.funding-wrapper p {
  font: 700 20px var(--bd-ff-bebas-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .funding-wrapper p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1600px) {
  .funding-wrapper p {
    font-size: 32px;
  }
}
.funding-wrapper h2 {
  font: 700 35px var(--bd-ff-bebas-sans);
}
@media only screen and (min-width: 1600px) {
  .funding-wrapper h2 {
    font-size: 48px;
  }
}
.funding-wrapper h2 span {
  color: var(--bd-tertiary);
}

.featured-title-two {
  font: 700 30px/1.35 var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  max-width: 240px;
}
@media only screen and (min-width: 576px) {
  .featured-title-two {
    font-size: 40px;
    padding-right: 230px;
    line-height: 1.1;
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .featured-title-two {
    font-size: 60px;
    padding-right: 280px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-title-two {
    font-size: 110px;
    padding-right: 252px;
  }
}
@media only screen and (min-width: 1200px) {
  .featured-title-two {
    font-size: 160px;
    padding-right: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .featured-title-two {
    padding-right: 300px;
  }
}
.featured-title-two .font-italic {
  font-style: italic;
}
.featured-title-two img {
  margin-top: -3px;
  display: inline-block;
  width: 95px;
}
@media only screen and (min-width: 768px) {
  .featured-title-two img {
    width: 140px;
    margin-top: -10px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-title-two img {
    width: 160px;
    margin-top: -35px;
  }
}
@media only screen and (min-width: 1200px) {
  .featured-title-two img {
    width: inherit;
  }
}

.featured-two-content .featured-title {
  font: 600 20px var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .featured-two-content .featured-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-two-content .featured-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-two-content .featured-title {
    font-size: 28px;
  }
}
.featured-two-content .featured-title span {
  font-style: italic;
  font-weight: 300;
}
.featured-two-content .feature-category ul li {
  font: 400 16px var(--bd-ff-kanit-sans);
}

.featured-style-two-date {
  font: 400 16px var(--bd-ff-kanit-sans);
}

.featured-work-area .view-details-btn {
  font: 400 16px var(--bd-ff-kanit-sans);
}
@media only screen and (min-width: 992px) {
  .featured-work-area .view-details-btn {
    font-size: 20px;
  }
}

.feature-two-btn {
  text-align: center;
}
.feature-two-btn .theme_btn {
  font: 400 14px var(--bd-ff-kanit-sans);
}

/*----------------------------------------*/
/*  8.12 Project-Details css
/*----------------------------------------*/
.portfolio-details-area {
  padding-bottom: 40px;
}

.page-title-top {
  text-align: center;
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
  .page-title-top {
    margin-bottom: 80px;
  }
}
.page-title-top .page-title {
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) {
  .page-title-top .page-title {
    margin-bottom: 25px;
  }
}
.page-title-top p {
  margin-bottom: 0;
}

.portfolio-details-info {
  margin-bottom: 40px;
}
.portfolio-details-info ul {
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .portfolio-details-info ul {
    display: flex;
    justify-content: space-between;
  }
}
.portfolio-details-info ul li {
  font: 400 16px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
  width: 50%;
  float: right;
  margin-bottom: 5px;
}
@media only screen and (min-width: 576px) {
  .portfolio-details-info ul li {
    width: inherit;
    float: none;
    margin-bottom: 0;
  }
}
.portfolio-details-info ul li span {
  color: var(--bd-black);
}

.portfolio-details-thumb {
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) {
  .portfolio-details-thumb {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-details-thumb {
    margin-bottom: 100px;
  }
}

.portfolio-details-title {
  font: 600 28px var(--bd-ff-jakarta-sans);
  letter-spacing: -2%;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .portfolio-details-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .portfolio-details-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-details-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1400px) {
  .portfolio-details-title {
    font-size: 50px;
  }
}

.portfolio-details-text p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.portfolio-details-gellary {
  margin: 10px 0 40px 0;
}
@media only screen and (min-width: 992px) {
  .portfolio-details-gellary {
    margin: 30px 0 80px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-details-gellary {
    margin: 70px 0 100px 0;
  }
}
@media (max-width: 575px) {
  .portfolio-details-gellary .row {
    --bs-gutter-y: 20px;
    --bs-gutter-x: 20px;
  }
}

.portfolio-details-single-thumb {
  height: 100%;
}
.portfolio-details-single-thumb img {
  width: 100%;
  height: 100%;
}

.details-thumb-four {
  height: 300px;
}
@media only screen and (min-width: 768px) {
  .details-thumb-four {
    height: 100%;
  }
}

/*----------------------------------------*/
/*  8.18 tools css
/*----------------------------------------*/
.tools-area {
  position: relative;
  background: center/cover no-repeat;
  z-index: 2;
}
.tools-area .section-top-content {
  margin-bottom: 0;
}

.tools-content p {
  color: var(--bd-text-secondary);
}
.tools-content .theme-btn .icon-box {
  background-color: var(--bd-text-secondary);
  color: #222222;
  border-color: #454545;
}
.tools-content .theme-btn .text-content {
  background-color: var(--bd-text-secondary);
  color: #222222;
}
.tools-content .theme-btn:hover .icon-box {
  background-color: var(--bd-primary);
  color: var(--bd-black);
}
.tools-content .theme-btn:hover .text-content {
  background-color: var(--bd-primary);
  color: var(--bd-black);
}

.single-tools {
  padding: 30px 50px 50px 50px;
  border-radius: 110px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
}
.single-tools p {
  margin-bottom: 0;
  color: #C4C4C4;
  font-size: 16px;
}

.tools-icon {
  margin-bottom: 15px;
}
.tools-icon img {
  height: 70px;
  width: 70px;
  object-fit: contain;
}

.tools-number {
  margin-bottom: 80px;
  font-size: 16px;
  color: #C4C4C4;
}
@media (max-width: 575px) {
  .tools-number {
    margin-bottom: 30px;
  }
}

.tools-slider {
  margin-left: 0;
}
@media only screen and (min-width: 576px) {
  .tools-slider {
    margin: 0 50px;
  }
}
@media only screen and (min-width: 768px) {
  .tools-slider {
    margin: 0 130px;
  }
}
@media only screen and (min-width: 992px) {
  .tools-slider {
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .tools-slider {
    margin: 0 0 0 100px;
  }
}

.navigation__wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.navigation__wrapper button {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-text-secondary);
  z-index: 1;
}
@media (max-width: 575px) {
  .navigation__wrapper button {
    height: 45px;
    width: 45px;
  }
}
.navigation__wrapper button:hover {
  background-color: var(--bd-primary);
}
.navigation__wrapper button i {
  font-weight: 600;
}

/*----------------------------------------*/
/*  8.16 Team css
/*----------------------------------------*/
.team-members-list {
  display: flex;
}
.team-members-list li {
  background-color: #F5F5F5;
  margin-left: -15px;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: auto;
  border: 2px solid var(--bd-white);
}
.team-members-list li:first-child {
  margin-left: 0;
}

.team-top-content {
  margin-bottom: 80px;
}
.team-top-content p {
  max-width: 400px;
}
@media only screen and (min-width: 768px) {
  .team-top-content p {
    max-width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .team-top-content p {
    max-width: 400px;
  }
}

.team-right-wrapper {
  text-align: start;
}
@media only screen and (min-width: 576px) {
  .team-right-wrapper {
    text-align: start;
  }
}
@media only screen and (min-width: 992px) {
  .team-right-wrapper {
    text-align: end;
  }
}
.team-right-wrapper .team-right-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  justify-content: start;
  gap: 10px;
}
@media only screen and (min-width: 576px) {
  .team-right-wrapper .team-right-content {
    margin-bottom: 30px;
    justify-content: start;
  }
}
@media only screen and (min-width: 992px) {
  .team-right-wrapper .team-right-content {
    margin-bottom: 50px;
    justify-content: end;
  }
}
.team-right-wrapper .team-right-content h5 {
  font-size: 20px;
  font-weight: 700;
  writing-mode: vertical-lr;
  transform: scale(-1);
  margin-top: 15px;
}
.team-right-wrapper .team-right-content span {
  color: var(--bd-text-body);
  font-size: 16px;
  margin-bottom: 5px;
  display: inline-block;
}
@media (max-width: 575px) {
  .team-right-wrapper .team-right-content span {
    display: none;
  }
}

.line-btn a {
  font: 500 14px var(--bd-ff-inter-sans);
}

.team-img {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.team-img .social-icon {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
.team-img .social-icon ul {
  justify-content: center;
}
.team-img img {
  width: 100%;
  object-fit: cover;
}

.team-wrapper:nth-child(2n) {
  margin-top: 30px;
}
@media only screen and (min-width: 992px) {
  .team-wrapper:nth-child(2n) {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-wrapper:nth-child(2n) {
    margin-top: 50px;
  }
}

@media (max-width: 575px) {
  .single-team {
    max-width: 320px;
    margin: auto;
  }
}
.single-team:hover .team-img img {
  transform: scale(1.06);
}
.single-team:hover .social-icon ul li a {
  transform: translateX(0px);
  opacity: 1;
}

.social-icon ul {
  display: flex;
  gap: 6px;
}
.social-icon ul li a {
  height: 40px;
  width: 40px;
  background-color: var(--bd-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateX(20px);
  opacity: 0;
}
.social-icon ul li a:hover {
  background-color: var(--bd-primary);
}
.social-icon ul li .facebook {
  transition: 0.2s;
}
.social-icon ul li .linkedin {
  transition: 0.4s;
}
.social-icon ul li .instagram {
  transition: 0.6s;
}
.social-icon ul li .whatsapp {
  transition: 0.8s;
}

.team-img-content span {
  font-size: 16px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  color: var(--bd-text-body);
  font-style: italic;
  margin: 0 0 3px 10px;
}
.team-img-content span::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  height: 15px;
  width: 1px;
  background-color: var(--bd-text-body);
  transform: rotate(18deg);
}

.team-author-title {
  font-size: 22px;
  font-weight: 500;
  text-transform: capitalize;
}
.team-author-title a:hover {
  color: var(--bd-primary);
}

.home-two-team-area {
  background-color: #F5F5F5;
  padding-bottom: 50px;
}
@media only screen and (min-width: 576px) {
  .home-two-team-area {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .home-two-team-area {
    padding-bottom: 140px;
  }
}

@media only screen and (min-width: 768px) {
  .team-style-two-content {
    max-width: 600px;
  }
}
@media only screen and (min-width: 992px) {
  .team-style-two-content {
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .team-style-two-content {
    padding-right: 70px;
  }
}
.team-style-two-content .clients-review-content p {
  color: var(--bd-black);
}
.team-style-two-content .section-text {
  max-width: 400px;
}

.team-style-two-btn {
  padding-top: 20px;
}

.team-member-slider-wrapper {
  margin-right: 0px;
  padding-left: 0px;
}
@media only screen and (min-width: 576px) {
  .team-member-slider-wrapper {
    margin-right: 0px;
    padding-left: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-member-slider-wrapper {
    margin-right: -110px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-member-slider-wrapper {
    margin-right: -310px;
    padding-left: 80px;
  }
}
.team-member-slider-wrapper .team-slider-active .swiper-slide:nth-child(2n) {
  margin-top: 0px;
}
@media only screen and (min-width: 992px) {
  .team-member-slider-wrapper .team-slider-active .swiper-slide:nth-child(2n) {
    margin-top: 50px;
  }
}

.team-style-two {
  margin-bottom: 0;
}
.team-style-two .team-img-content span {
  font: 400 16px var(--bd-ff-kanit-sans);
}
.team-style-two .team-img-content .team-author-title {
  font: 600 22px var(--bd-ff-jakarta-sans);
}
@media (max-width: 575px) {
  .team-style-two .team-img-content .team-author-title {
    font-size: 20px;
  }
}

.team-style-three {
  background-color: var(--bd-black);
}
.team-style-three .border-line {
  border-bottom: 1px solid #2B2B2B;
}

.team-title-wrapper {
  max-width: 550px;
}

.team-style-three-top {
  margin-bottom: 100px;
}
.team-style-three-top .section-text-three p {
  color: var(--bd-text-secondary);
}
.team-style-three-top .sub-title-three {
  color: var(--bd-text-secondary);
}
.team-style-three-top .sub-title-three::before {
  background-color: var(--bd-text-secondary);
}

.team-member-single-inner {
  padding: 40px 0px;
  border-bottom: 1px solid #2B2B2B;
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.3s;
}
.team-member-single-inner:first-child {
  border-top: 1px solid #2B2B2B;
}
.team-member-single-inner:hover {
  border-bottom-color: var(--bd-white);
}
.team-member-single-inner:hover .team-hover-img {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  visibility: visible;
}
.team-member-single-inner:hover .name {
  color: var(--bd-white);
}
.team-member-single-inner .team-hover-img {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: 0.4s;
  border-radius: 5px;
  z-index: 5;
}
@media (max-width: 575px) {
  .team-member-single-inner .team-hover-img img {
    height: 100%;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .team-member-single-inner .team-hover-img {
    height: 250px;
    width: 200px;
  }
}
@media only screen and (min-width: 992px) {
  .team-member-single-inner .team-hover-img {
    right: 100px;
  }
}
.team-member-single-inner .post {
  font: 400 18px var(--bd-ff-kanit-sans);
  display: inline-block;
  position: relative;
  color: var(--bd-text-secondary);
  width: calc(50% - 10px);
  margin-left: 15px;
}
@media only screen and (min-width: 576px) {
  .team-member-single-inner .post {
    width: calc(40% - 10px);
  }
}
@media only screen and (min-width: 768px) {
  .team-member-single-inner .post {
    width: calc(30% - 10px);
  }
}
@media only screen and (min-width: 1200px) {
  .team-member-single-inner .post {
    width: calc(40% - 10px);
  }
}
.team-member-single-inner .post::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  height: 15px;
  width: 1px;
  background-color: var(--bd-text-secondary);
  transform: rotate(18deg);
}
.team-member-single-inner .name {
  font: 500 24px var(--bd-ff-epilogue-sans);
  color: var(--bd-text-body);
}
@media only screen and (min-width: 768px) {
  .team-member-single-inner .name {
    font-size: 30px;
  }
}

.awards-top-content {
  margin-bottom: 60px;
}
@media only screen and (min-width: 1200px) {
  .awards-top-content {
    margin-bottom: 100px;
  }
}
.awards-top-content .section-title-three {
  max-width: 860px;
  margin-left: auto;
}
@media only screen and (min-width: 992px) {
  .awards-top-content .section-title-three {
    max-width: inherit;
  }
}
@media only screen and (min-width: 1200px) {
  .awards-top-content .section-title-three {
    max-width: 860px;
  }
}

.awards-thumb {
  height: 300px;
  background: center/cover no-repeat;
}
@media only screen and (min-width: 576px) {
  .awards-thumb {
    height: 425px;
  }
}
@media only screen and (min-width: 992px) {
  .awards-thumb {
    height: 590px;
  }
}
@media only screen and (min-width: 1200px) {
  .awards-thumb {
    height: 625px;
  }
}

@media only screen and (min-width: 1200px) {
  .awards-area .img-box-reveal {
    padding-left: 50px;
  }
}

.awards-text {
  margin-bottom: 50px;
  margin-left: 0px;
}
@media only screen and (min-width: 992px) {
  .awards-text {
    margin: 20px 0 100px 20px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .awards-text {
    margin: 20px 0 150px 120px;
    max-width: 360px;
  }
}
.awards-text p {
  font: 400 18px var(--bd-ff-kanit-sans);
}

.awards-list-wrapper {
  margin-left: 0px;
  padding: 0;
  background-color: var(--bd-white);
  position: relative;
}
@media only screen and (min-width: 992px) {
  .awards-list-wrapper {
    margin-left: -200px;
    padding: 40px 0px 0px 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .awards-list-wrapper {
    padding: 60px 0px 0px 60px;
  }
}

.awards-single-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  border-top: 1px solid #E5E5E5;
}
.awards-single-inner:last-child {
  border-bottom: 1px solid #E5E5E5;
}
.awards-single-inner .awards-name {
  font: 500 18px var(--bd-ff-epilogue-sans);
  width: calc(50% - 10px);
}
@media only screen and (min-width: 576px) {
  .awards-single-inner .awards-name {
    width: calc(28% - 10px);
  }
}
.awards-single-inner p {
  font: 400 15px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  width: calc(55% - 10px);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .awards-single-inner p {
    width: calc(70% - 10px);
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .awards-single-inner p {
    width: calc(70% - 10px);
    font-size: 18px;
  }
}
.awards-single-inner .awards-number {
  font: 400 16px var(--bd-ff-epilogue-sans);
  width: calc(16% - 10px);
}
.awards-single-inner .trophy {
  flex: 0 0 auto;
}

.team-top-area .section-title-wrapper .page-title-right {
  position: inherit;
  padding-left: 80px;
}
@media only screen and (min-width: 576px) {
  .team-top-area .section-title-wrapper .page-title-right {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 768px) {
  .team-top-area .section-title-wrapper .page-title-right {
    position: absolute;
    padding-left: 0px;
    right: 362px;
    top: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .team-top-area .section-title-wrapper .page-title-right {
    right: 490px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-top-area .section-title-wrapper .page-title-right {
    right: 560px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-top-area .section-title-wrapper .page-title-right {
    right: 630px;
  }
}
@media only screen and (min-width: 1600px) {
  .team-top-area .section-title-wrapper .page-title-right {
    right: 460px;
  }
}
.team-top-area .section-title-wrapper .section-five-text {
  max-width: 100%;
  padding: 0;
  margin-top: 20px;
  text-align: start;
}
@media only screen and (min-width: 992px) {
  .team-top-area .section-title-wrapper .section-five-text {
    text-align: end;
    margin: 40px 0 0 auto;
    max-width: 360px;
  }
}

.team-bg {
  min-height: 350px;
  display: flex;
  align-items: end;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .team-bg {
    min-height: 480px;
  }
}
@media only screen and (min-width: 992px) {
  .team-bg {
    min-height: 580px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-bg {
    min-height: 780px;
  }
}
.team-bg .team-bg-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background: center/cover no-repeat;
  z-index: -1;
}

.team-bg-img-wrapper .identity-counter-wrapper {
  display: flex;
  gap: 30px;
}

@media only screen and (min-width: 1200px) {
  .team-member-content {
    padding-right: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-member-content {
    padding-right: 230px;
  }
}
.team-member-content .section-title-two {
  margin-bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .team-member-content .section-title-two {
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .arrow-down {
    text-align: center;
  }
}
@media (max-width: 575px) {
  .arrow-down img {
    width: 100px;
  }
}

/*----------------------------------------*/
/*  8.15 Team Details css
/*----------------------------------------*/
.team-heading .designation {
  font: italic 400 20px var(--bd-ff-kanit-sans);
  display: inline-block;
  color: var(--bd-text-body);
  margin-left: 10px;
  position: relative;
}
@media (max-width: 575px) {
  .team-heading .designation {
    font-size: 18px;
  }
}
.team-heading .designation::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  height: 15px;
  width: 1px;
  background-color: var(--bd-text-body);
  transform: rotate(18deg);
}

.team-single-title {
  font: 600 28px var(--bd-ff-jakarta-sans);
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .team-single-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-single-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 1200px) {
  .team-details-content {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-details-content {
    padding-left: 60px;
    margin-top: 25px;
  }
}
.team-details-content p {
  font: 400 18px var(--bd-ff-kanit-sans);
}
@media only screen and (min-width: 768px) {
  .team-details-content p {
    font-size: 16px;
  }
}
.team-details-content .service-business-list {
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) {
  .team-details-content .service-business-list {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-details-content .service-business-list {
    padding-bottom: 60px;
  }
}

.team-info ul {
  display: inline-block;
}
.team-info ul li {
  display: block;
  font: 400 18px var(--bd-ff-kanit-sans);
  margin-right: 0;
  margin-bottom: 5px;
  width: 50%;
  float: left;
  color: var(--bd-text-body);
}
@media (max-width: 575px) {
  .team-info ul li {
    width: 100%;
  }
}
.team-info ul li a {
  color: var(--bd-black);
}
.team-info ul li a:hover {
  color: var(--bd-primary);
}

.team-info-title {
  font: 600 24px var(--bd-ff-jakarta-sans);
  margin-bottom: 30px;
}

.team-contact ul {
  display: flex;
  gap: 10px;
  align-items: center;
}
.team-contact ul li a {
  height: 38px;
  width: 38px;
  display: inline-block;
  text-align: center;
  line-height: 38px;
  font-size: 16px;
  background: var(--bd-text-secondary);
  border-radius: 50%;
}
.team-contact ul li a:hover {
  background: var(--bd-primary);
  color: var(--bd-white);
}

/*# sourceMappingURL=main.css.map */

.logo img {
  max-width: 200px;
  height: auto;
}
.banner-main {
  height: 100vh;
  position: relative;
}
.banner-main::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 30%); */
}
.banner-video {
  max-width: 100vw;
  max-height: 100%;
  height: 100%;
  border-radius: 100px;
  width: 100%;
}
.banner-area {
  padding-top: 0px;
}
.service-big-img {
  text-align: center;
}