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

: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-grotesk-sans: "Space Grotesk", serif;
  --bd-ff-poppins-sans: "Poppins", serif;
  --bd-ff-playfair-sans: "Playfair Display", 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: #ff0000;
  --bd-secondary: #ff0000;
  --bd-tertiary: #D90A2C;
  --bd-orange: #ff0000;
  --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 marquee-slide {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes marquee-slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@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 slide-left-2 {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}


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

.gy-10 {
  --bs-gutter-y: 10px;
}

.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: 1200px) {
  .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;
  }
}

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

.line-pattern-two {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  z-index: -1;
}
@media only screen and (min-width: 1600px) {
  .line-pattern-two {
    max-width: 1500px;
    border-left: 1px solid var(--bd-border-primary);
    border-right: 1px solid var(--bd-border-primary);
  }
}
@media only screen and (min-width: 1750px) {
  .line-pattern-two {
    max-width: 1840px;
  }
}
.line-pattern-two .line-one {
  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-two .line-one {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .line-pattern-two .line-one {
    max-width: 1296px;
    width: 100%;
  }
}

/*---------------------------------
    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: 140px;
    padding-bottom: 140px;
  }
}

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

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

.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);
  scroll-behavior: auto !important
}

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-menu-five .mean-container .mean-nav ul li a.stretched-link {
  font: 500 18px var(--bd-ff-grotesk-sans);
  letter-spacing: 3%;
}
.offcanvas-menu-five .mean-container .mean-nav ul li a {
  font: 500 18px var(--bd-ff-grotesk-sans);
  letter-spacing: 3%;
}
.offcanvas-menu-five .follow-link {
  font: 500 18px var(--bd-ff-grotesk-sans);
}

.offcanvas-menu-six .mean-container .mean-nav ul li a.stretched-link {
  font: 500 18px var(--bd-ff-epilogue-sans);
  letter-spacing: 3%;
}
.offcanvas-menu-six .mean-container .mean-nav ul li a {
  font: 500 18px var(--bd-ff-epilogue-sans);
  letter-spacing: 3%;
}
.offcanvas-menu-six .follow-link {
  font: 500 18px var(--bd-ff-epilogue-sans);
}

.offcanvas-menu-seven .mean-container .mean-nav ul li a.stretched-link {
  font: 400 18px var(--bd-ff-dm-sans);
  letter-spacing: 2%;
}
.offcanvas-menu-seven .mean-container .mean-nav ul li a {
  font: 400 18px var(--bd-ff-dm-sans);
  letter-spacing: 2%;
}
.offcanvas-menu-seven .follow-link {
  font: 400 18px var(--bd-ff-dm-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;
}
@media only screen and (min-width: 1200px) {
  .offcanvas-left .mean-container .mean-nav ul li a.mean-expand {
    font-size: 40px !important;
  }
}
.offcanvas-left .mean-container .mean-nav ul li a.mean-expand::before {
  font-weight: 400;
  color: var(--bd-text-secondary);
}
.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: 500 26px/1.27 var(--bd-ff-dm-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: #707070;
}

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

.sub-title-five {
  font: 500 20px var(--bd-ff-grotesk-sans);
  display: inline-block;
  position: relative;
  padding-left: 32px;
}
@media (max-width: 575px) {
  .sub-title-five {
    font-size: 18px;
    padding-left: 28px;
  }
}
.sub-title-five::before {
  position: absolute;
  content: "";
  left: 0;
  top: 2px;
  height: 20px;
  width: 20px;
  background-color: var(--bd-black);
  border-radius: 3px;
}
@media (max-width: 575px) {
  .sub-title-five::before {
    height: 18px;
    width: 18px;
  }
}

.section-title-five {
  font: 500 32px/1.12 var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 576px) {
  .section-title-five {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .section-title-five {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title-five {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-five {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1600px) {
  .section-title-five {
    font-size: 100px;
  }
}
.section-title-five span {
  color: #AAAAAA;
}

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

.sub-title-six {
  font: 500 17px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  display: inline-block;
  padding: 10px 18px 10px 40px;
  border: 1px solid var(--bd-text-secondary);
  position: relative;
  border-radius: 11px;
  letter-spacing: 2%;
}
.sub-title-six::before {
  position: absolute;
  content: "";
  left: 20px;
  top: 17px;
  height: 7px;
  width: 7px;
  border-radius: 2px;
  background-color: #FF6D39;
}

.section-title-seven {
  font: 500 30px/1.3 var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 768px) {
  .section-title-seven {
    font-size: 40px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 992px) {
  .section-title-seven {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-seven {
    font-size: 60px;
  }
}
.section-title-seven span {
  font-family: var(--bd-ff-playfair-sans);
  font-weight: 400;
}

/*----------------------------------------*/
/*  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: #fff;
  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: #fff;
  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;
}

.theme-btn.theme-btn-five .icon-box {
  background-color: var(--bd-black);
  color: var(--bd-white);
  border-color: var(--bd-white);
}
.theme-btn.theme-btn-five .text-content {
  background-color: var(--bd-black);
  color: var(--bd-white);
}
.theme-btn.theme-btn-five .text-content {
  font: 500 16px var(--bd-ff-grotesk-sans);
  padding: 15px 26px;
}

.header-style-six .theme-btn.theme-btn-five .text-content {
  font: 400 18px var(--bd-ff-epilogue-sans);
  padding: 15px 24px;
}

.btn-border {
  border: 1px solid var(--bd-black);
  border-radius: 15px;
  padding: 5px 5px 5px 20px;
  display: inline-block;
}
.btn-border:hover {
  background-color: #FF6D39;
  border-color: #FF6D39;
}
.btn-border:hover .text-content {
  color: var(--bd-white);
}
.btn-border:hover .icon-box {
  background-color: var(--bd-white);
  color: var(--bd-black);
}
.btn-border .text-content {
  font: 500 16px var(--bd-ff-dm-sans);
  color: var(--bd-black);
}
.btn-border .icon-box {
  padding: 8px 13px;
  background-color: #FF6D39;
  border-radius: 11px;
  display: inline-block;
  margin-left: 15px;
  color: var(--bd-white);
}

.btn-border.btn-bg {
  background-color: #FF6D39;
  border-color: #FF6D39;
}
.btn-border.btn-bg:hover {
  background-color: var(--bd-black);
  border-color: var(--bd-black);
}
.btn-border.btn-bg .text-content {
  color: var(--bd-white);
  font-weight: 600;
}
.btn-border.btn-bg .icon-box {
  background-color: var(--bd-white);
  color: var(--bd-black);
}

/*----------------------------------------*/
/*  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);
}

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

.preloader-style-five .preloader-circle svg circle:last-child {
  stroke: #FF6D39;
}

/* 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;
    background-color: #000;
}
@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;
  background-color: #fff;
  border-radius: 10px;
}
@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;
}

.header-sticky {
  transition: all 0.5s;
}

.transformed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 800;
  transform: translateY(-100%);
}

.sticky {
  position: fixed !important;
  top: 0;
  z-index: 111;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  transition: 1s;
  background: #000;
  -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);
}

/*----------------------------------------*/
/*  4.4 Header Style 4
/*----------------------------------------*/
.header-style-five {
  border: 0;
}
@media only screen and (min-width: 992px) {
  .header-style-five .main-menu ul {
    gap: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .header-style-five .main-menu ul {
    gap: 40px;
  }
}
.header-style-five .main-menu ul li a {
  font: 500 18px var(--bd-ff-grotesk-sans);
  letter-spacing: 3%;
}
.header-style-five .menu-item:hover {
  border-color: var(--bd-orange) !important;
}
.header-style-five .menu-item.active {
  border-color: var(--bd-orange);
}

/*----------------------------------------*/
/*  4.4 Header Style 4
/*----------------------------------------*/
.header-style-six {
  border: 0;
}
@media only screen and (min-width: 992px) {
  .header-style-six .main-menu ul {
    gap: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .header-style-six .main-menu ul {
    gap: 40px;
  }
}
.header-style-six .main-menu ul li a {
  font: 500 18px var(--bd-ff-epilogue-sans);
  letter-spacing: 3%;
}
@media only screen and (min-width: 992px) {
  .header-style-six .main-menu ul li a {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .header-style-six .main-menu ul li a {
    font-size: 18px;
  }
}
.header-style-six .menu-item:hover {
  border-color: var(--bd-primary) !important;
}
.header-style-six .menu-item.active {
  border-color: var(--bd-primary);
}

/*----------------------------------------*/
/*  4.4 Header Style 4
/*----------------------------------------*/
.header-style-seven {
  border: 0;
}
@media only screen and (min-width: 992px) {
  .header-style-seven .main-header {
    padding: 12px 0;
  }
}
.header-style-seven .main-menu {
  background-color: var(--bd-white);
  padding: 10px;
  border-radius: 15px;
}
.header-style-seven .main-menu ul {
  gap: 0;
}
.header-style-seven .main-menu ul li:hover > a {
  color: #FF6D39;
  background-color: #EFEFEF;
}
.header-style-seven .main-menu ul li a {
  font: 400 18px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  letter-spacing: 2%;
  padding: 8px 12px;
  border-radius: 9px;
}
@media only screen and (min-width: 1200px) {
  .header-style-seven .main-menu ul li a {
    padding: 8px 20px;
  }
}
.header-style-seven .main-menu ul li .sub-menu li:hover > a {
  color: #FF6D39 !important;
}
.header-style-seven .main-menu ul li .sub-menu li .sub-menu li:hover a {
  color: #FF6D39 !important;
}
.header-style-seven .main-menu ul li.has-mega-menu:hover > .mega-menu {
  top: 75%;
}
.header-style-seven .menu-item:hover {
  border-color: #FF6D39 !important;
}
.header-style-seven .menu-item.active {
  border-color: #FF6D39;
}

/* 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: 40%;
  top: 15%;
  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: 20px;
}
@media only screen and (min-width: 576px) {
  .banner-title {
    font-size: 60px;
    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: 100px;
    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;
}
/* @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;
  }
} */

/*----------------------------------------*/
/*  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: center/cover no-repeat;
}

.banner-circle-img {
  width: 250px;
  margin: auto;
  animation: spinner 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;
}

/*----------------------------------------*/
/*  7.4 banner Style 4
/*----------------------------------------*/
.banner-five-content-wrapper .content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bd-black);
}
.banner-five-content-wrapper .content-top h5 {
  font: 500 24px var(--bd-ff-grotesk-sans);
  padding-left: 32px;
  position: relative;
}
.banner-five-content-wrapper .content-top h5::before {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  height: 20px;
  width: 20px;
  background-color: var(--bd-black);
  border-radius: 3px;
}
.banner-five-content-wrapper .content-top span {
  font: 400 18px var(--bd-ff-grotesk-sans);
  color: var(--bd-black);
}
.banner-five-content-wrapper p {
  font: 400 22px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .banner-five-content-wrapper p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-five-content-wrapper p {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-five-content-wrapper p {
    font-size: 24px;
  }
}

.banner-thumb-1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 176.5px;
  border-bottom-left-radius: 175.5px;
  width: fit-content;
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .banner-thumb-1 {
    flex: auto;
  }
}
.banner-thumb-1::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bd-orange);
  opacity: 0.6;
}

.banner-thumb-2 {
  overflow: hidden;
  border-radius: 15%;
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .banner-thumb-2 {
    flex: auto;
  }
}

.banner-five-thumb {
  display: flex;
  position: relative;
}
@media (max-width: 575px) {
  .banner-five-thumb {
    max-width: 340px;
    margin: auto;
  }
}
.banner-five-thumb .banner-video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 575px) {
  .banner-five-thumb .banner-video-thumb {
    height: 80px;
    width: 80px;
  }
}
.banner-five-thumb .banner-video-thumb video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-five-thumb .banner-video-thumb .intro-video-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  background-color: rgba(77, 77, 77, 0.7);
  color: var(--bd-white);
  z-index: 3;
}

.banner-five-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px 0;
  justify-items: center;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .banner-five-content-wrapper {
    grid-template-columns: 350px 1fr auto;
    justify-items: end;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-five-content-wrapper {
    grid-template-columns: 465px 1fr auto;
    justify-items: end;
  }
}
.banner-five-content-wrapper::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background-color: var(--bd-black);
  right: 0;
  bottom: 0;
  border-radius: 3px;
}

.banner-style-five {
  padding-top: 140px;
}
@media only screen and (min-width: 768px) {
  .banner-style-five {
    padding-top: 180px;
  }
}

.banner-five-title-wrapper .title-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .banner-five-title-wrapper .title-top {
    gap: 20px;
  }
}
.banner-five-title-wrapper .title-top .title-img {
  position: relative;
  overflow: hidden;
  width: 100px;
}
@media only screen and (min-width: 576px) {
  .banner-five-title-wrapper .title-top .title-img {
    width: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-five-title-wrapper .title-top .title-img {
    width: inherit;
  }
}
.banner-five-title-wrapper .title-top .title-img .marquee {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  height: 140px;
  writing-mode: vertical-lr;
  transform: translate(-50%, -50%) scale(-1);
}
.banner-five-title-wrapper .title-top .title-img .marquee span {
  font: 700 30px var(--bd-ff-grotesk-sans);
  will-change: transform;
  transform: translateY(0);
  white-space: nowrap;
  animation: marquee-slide 4s linear infinite;
  padding-top: 10px;
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .banner-five-title-wrapper .title-top .title-img .marquee span {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-five-title-wrapper .title-top .title-img .marquee span {
    font-size: 70px;
  }
}
.banner-five-title-wrapper .banner-title {
  font: 500 40px var(--bd-ff-grotesk-sans);
  margin-bottom: 0;
  max-width: inherit;
}
@media only screen and (min-width: 576px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 110px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 135px;
    line-height: 1.01;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-five-title-wrapper .banner-title {
    font-size: 175px;
  }
}
.banner-five-title-wrapper .banner-title span {
  color: #AAAAAA;
}
.banner-five-title-wrapper .banner-title > img {
  margin: 0 10px 0 0;
  width: 100px;
}
@media only screen and (min-width: 576px) {
  .banner-five-title-wrapper .banner-title > img {
    width: 150px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-five-title-wrapper .banner-title > img {
    width: 150px;
    margin: -25px 10px 0 0;
  }
}
@media only screen and (min-width: 992px) {
  .banner-five-title-wrapper .banner-title > img {
    width: inherit;
    margin: -33px 20px 0 0;
  }
}

.banner-title.ml-150 {
  margin-left: 0;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .banner-title.ml-150 {
    text-align: start;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title.ml-150 {
    margin-left: 150px;
  }
}

.circle-text {
  max-width: 1130px;
  text-align: end;
  margin-top: 30px;
}
.circle-text .circle-img {
  max-width: 160px;
  position: relative;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .circle-text .circle-img {
    margin: 0 0 0 auto;
  }
}
.circle-text .circle-img .rotate-text {
  animation: spinner 7s infinite linear;
}
.circle-text .circle-img .circle-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*----------------------------------------*/
/*  7.6 banner Style 6
/*----------------------------------------*/
.banner-style-six {
  padding-top: 110px;
}
@media only screen and (min-width: 576px) {
  .banner-style-six {
    padding-top: 140px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-style-six {
    padding-top: 180px;
  }
}

.banner-six-title-wrapper {
  text-align: center;
}

.banner-title-six {
  font: 500 38px/1.25 var(--bd-ff-epilogue-sans);
  letter-spacing: -3%;
}
@media only screen and (min-width: 576px) {
  .banner-title-six {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-title-six {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-six {
    font-size: 80px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-six {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-title-six {
    font-size: 110px;
  }
}
@media only screen and (min-width: 1600px) {
  .banner-title-six {
    font-size: 130px;
  }
}
.banner-title-six span {
  font-style: italic;
}
.banner-title-six img {
  margin-top: -5px;
  width: 90px;
}
@media only screen and (min-width: 768px) {
  .banner-title-six img {
    width: 100px;
    margin-top: -25px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-six img {
    width: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-six img {
    width: inherit;
  }
}
.banner-title-six .rotate-shape-2 {
  animation: spinner 10s infinite linear;
  display: none;
}
@media only screen and (min-width: 576px) {
  .banner-title-six .rotate-shape-2 {
    display: inline;
    width: 40px;
    margin-top: -10px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-title-six .rotate-shape-2 {
    width: 50px;
    margin-top: -20px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-title-six .rotate-shape-2 {
    width: 100px;
    margin-top: -25px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-title-six .rotate-shape-2 {
    width: 120px;
  }
}

.title-mid {
  display: flex;
  justify-content: center;
  gap: 30px;
}
@media only screen and (min-width: 992px) {
  .title-mid {
    gap: 20px 60px;
  }
}
.title-mid p {
  font: 400 18px var(--bd-ff-poppins-sans);
  color: var(--bd-black);
  text-align: end;
  margin: 0;
  max-width: 340px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .title-mid p {
    display: block;
    font-size: 16px;
    max-width: 310px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .title-mid p {
    font-size: 18px;
    max-width: 340px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .title-mid p {
    margin-bottom: 0;
  }
}

/*----------------------------------------*/
/*  7.7 banner Style 7
/*----------------------------------------*/
.banner-style-seven {
  position: relative;
  padding-top: 140px;
}
.banner-style-seven .line-pattern-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 640px;
  background: center/cover no-repeat;
  z-index: -1;
}

.banner-seven-wrapper ul {
  display: flex;
  gap: 10px 5px;
  justify-content: center;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .banner-seven-wrapper ul {
    gap: 10px 30px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-seven-wrapper ul {
    flex-direction: column;
    margin-bottom: 0;
  }
}
.banner-seven-wrapper ul li a {
  font: 500 15px var(--bd-ff-dm-sans);
  letter-spacing: 2%;
  color: var(--bd-black);
  display: inline-block;
  position: relative;
}
.banner-seven-wrapper ul li a:hover {
  color: #FF6D39;
}
.banner-seven-wrapper ul li a:hover::before {
  right: -20px;
  opacity: 1;
  visibility: visible;
}
.banner-seven-wrapper ul li a::before {
  position: absolute;
  content: "\f061";
  font-family: var(--bd-ff-fontawesome);
  right: -15px;
  top: 5px;
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media (max-width: 575px) {
  .banner-seven-wrapper ul li a::before {
    display: none;
  }
}
@media only screen and (min-width: 576px) {
  .banner-seven-wrapper ul li a {
    font-size: 18px;
  }
}
.banner-seven-wrapper .banner-title {
  font: 600 45px/1 var(--bd-ff-playfair-sans);
  letter-spacing: 1%;
  margin-bottom: 0;
  text-align: center;
  max-width: 100%;
}
@media only screen and (min-width: 576px) {
  .banner-seven-wrapper .banner-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-seven-wrapper .banner-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-seven-wrapper .banner-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-seven-wrapper .banner-title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-seven-wrapper .banner-title {
    font-size: 200px;
  }
}
.banner-seven-wrapper .banner-title span {
  text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
  color: var(--bd-white);
  font-family: var(--bd-ff-dm-sans);
}
.banner-seven-wrapper .large-thumb {
  overflow: hidden;
  border-radius: 21px;
}
@media only screen and (min-width: 768px) {
  .banner-seven-wrapper .large-thumb {
    margin-top: -15px;
  }
}
@media only screen and (min-width: 992px) {
  .banner-seven-wrapper .large-thumb {
    margin-top: -22px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner-seven-wrapper .large-thumb {
    margin-top: -25px;
  }
}
@media only screen and (min-width: 1400px) {
  .banner-seven-wrapper .large-thumb {
    margin-top: -35px;
  }
}
.banner-seven-wrapper .large-thumb img {
  width: 100%;
  height: 200px;
}
@media only screen and (min-width: 576px) {
  .banner-seven-wrapper .large-thumb img {
    height: 300px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-seven-wrapper .large-thumb img {
    height: 100%;
  }
}

.consulting-left {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media only screen and (min-width: 576px) {
  .consulting-left {
    gap: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .consulting-left {
    grid-template-columns: 150px 150px;
    gap: 30px 40px;
  }
}
@media only screen and (min-width: 992px) {
  .consulting-left {
    grid-template-columns: 220px 220px;
    gap: 30px 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .consulting-left {
    gap: 30px 130px;
  }
}

.satisfied-customer h3 {
  font: 500 30px/1 var(--bd-ff-dm-sans);
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--bd-text-secondary);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .satisfied-customer h3 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .satisfied-customer h3 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .satisfied-customer h3 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1400px) {
  .satisfied-customer h3 {
    font-size: 80px;
  }
}
.satisfied-customer h3::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 50px;
  background-color: #FF6D39;
}
.satisfied-customer p {
  font: 400 16px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin: 0;
}
@media only screen and (min-width: 576px) {
  .satisfied-customer p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .satisfied-customer p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .satisfied-customer p {
    font-size: 18px;
  }
}

.section-text-seven p {
  font: 400 18px var(--bd-ff-dm-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .section-text-seven p {
    font-size: 20px;
  }
}

.consulting-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1300px;
  gap: 30px 0;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .consulting-content-wrapper {
    grid-template-columns: 1fr 350px;
    gap: 30px 40px;
  }
}
@media only screen and (min-width: 992px) {
  .consulting-content-wrapper {
    grid-template-columns: 1fr 400px;
    gap: 30px 0;
  }
}
.consulting-content-wrapper .section-text-seven {
  grid-column: inherit;
}
@media only screen and (min-width: 768px) {
  .consulting-content-wrapper .section-text-seven p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .consulting-content-wrapper .section-text-seven p {
    font-size: 20px;
  }
}

.border-bottom-line {
  border-bottom: 1px solid var(--bd-text-secondary);
}

.img_anim_reveal {
  visibility: hidden;
  overflow: hidden;
}
.img_anim_reveal img {
  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: top;
}

/*----------------------------------------*/
/*  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 {
  color: #fff;
  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: 5px;
}
@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: 10px;
  height: 150px;
}
.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 .mean-expand {
  position: relative;
}
.mean-container .mean-nav > ul .mean-expand:hover::before {
  color: var(--bd-primary) !important;
}
.mean-container .mean-nav > ul .mean-expand::before {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  color: var(--bd-white);
  transition: 0.35s;
}
.mean-container .mean-nav > ul .mean-expand.mean-clicked {
  color: var(--bd-primary);
}
.mean-container .mean-nav > ul .mean-expand.mean-clicked::before {
  transform: translateY(-50%) rotate(180deg);
  color: var(--bd-primary) !important;
}
.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 #8E8E8E;
}
.mean-container .mean-nav ul li:first-child {
  border-top: 0 !important;
}
.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-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;
}
.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid #8E8E8E !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;
  color: var(--bd-white);
}
.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: 220px;
    
  }
}
.footer-area .footer-logo {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 320px;
  margin: auto;
  bottom: -15px;
  text-align: center;
  padding-bottom: 50px;
}
@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);
}

.footer-five .footer-contact-title {
  font-family: var(--bd-ff-dm-sans);
}
.footer-five .text-content {
  font: 500 18px var(--bd-ff-dm-sans);
  background-color: var(--bd-orange);
}
.footer-five .theme-btn .icon-box {
  background-color: var(--bd-orange);
}
.footer-five .footer-location span, .footer-five .footer-location p {
  font-family: var(--bd-ff-dm-sans);
}
.footer-five .footer-call-number, .footer-five .footer-mail {
  font-family: var(--bd-ff-dm-sans);
}
.footer-five .footer-call-number a:hover, .footer-five .footer-mail a:hover {
  color: var(--bd-orange);
}
.footer-five .footer-copyright-text p {
  font: 500 18px var(--bd-ff-dm-sans);
}
@media (max-width: 575px) {
  .footer-five .footer-copyright-text p {
    font-size: 16px;
  }
}
.footer-five .footer-menu-link ul li a {
  font: 500 18px var(--bd-ff-dm-sans);
}
@media (max-width: 575px) {
  .footer-five .footer-menu-link ul li a {
    font-size: 16px;
  }
}
.footer-five .footer-menu-link ul li a:hover {
  color: var(--bd-orange);
}

.footer-six .footer-contact-title {
  font-family: var(--bd-ff-epilogue-sans);
}
.footer-six .text-content {
  font: 500 18px var(--bd-ff-epilogue-sans);
}
.footer-six .footer-location span, .footer-six .footer-location p {
  font-family: var(--bd-ff-epilogue-sans);
}
.footer-six .footer-call-number, .footer-six .footer-mail {
  font-family: var(--bd-ff-epilogue-sans);
}
.footer-six .footer-copyright-text p {
  font: 500 18px var(--bd-ff-epilogue-sans);
}
@media (max-width: 575px) {
  .footer-six .footer-copyright-text p {
    font-size: 14px;
  }
}
.footer-six .footer-menu-link ul li a {
  font: 500 18px var(--bd-ff-epilogue-sans);
}
@media (max-width: 575px) {
  .footer-six .footer-menu-link ul li a {
    font-size: 14px;
  }
}

.footer-seven .footer-two-contact-title {
  font-family: --bd-ff-dm-sans;
}
.footer-seven .text-content {
  font: 500 18px/1.3 --bd-ff-dm-sans;
}
.footer-seven .footer-widget-title {
  font: 600 22px --bd-ff-playfair-sans;
}
@media (max-width: 575px) {
  .footer-seven .footer-widget-title {
    font-size: 20px;
  }
}
.footer-seven .footer-social-link ul li a {
  font-family: --bd-ff-playfair-sans;
}
.footer-seven .footer-link ul li a {
  font-family: --bd-ff-playfair-sans;
}
.footer-seven .footer-two-copy-rigth-text p {
  font: 400 18px --bd-ff-playfair-sans;
}
@media (max-width: 575px) {
  .footer-seven .footer-two-copy-rigth-text p {
    font-size: 16px;
  }
}
.footer-seven .footer-menu-link.footer-menu-two ul li a {
  font: 400 18px --bd-ff-playfair-sans;
}
@media (max-width: 575px) {
  .footer-seven .footer-menu-link.footer-menu-two ul li a {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/*  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: center/cover no-repeat;
}
@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: 100%;
  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:#fff;
}
.identity-single-count:last-child p {
  color: #fff;
}

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

@media only screen and (min-width: 768px) {
  .about-style-five {
    margin-top: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .about-style-five {
    margin-top: 45px;
  }
}
.about-style-five .section-title-five {
  font-size: 32px;
}
@media only screen and (min-width: 576px) {
  .about-style-five .section-title-five {
    font-size: 34px;
  }
}
@media only screen and (min-width: 768px) {
  .about-style-five .section-title-five {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .about-style-five .section-title-five {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-style-five .section-title-five {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-style-five .section-title-five {
    font-size: 70px;
  }
}
.about-style-five .about-top {
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
  .about-style-five .about-top {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .about-style-five .about-top {
    margin-bottom: 120px;
  }
}

.about-single-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 0;
}
@media only screen and (min-width: 768px) {
  .about-single-box {
    grid-template-columns: 1fr 50%;
  }
}
@media only screen and (min-width: 992px) {
  .about-single-box {
    grid-template-columns: 1fr 460px;
  }
}
.about-single-box .contact-btn a {
  font: 400 18px var(--bd-ff-dm-sans);
}

.section-text-five p {
  font: 400 18px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .section-text-five p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .section-text-five p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .section-text-five p {
    font-size: 22px;
  }
}

.about-single-box {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .about-single-box {
    margin-bottom: 0;
  }
}
.about-single-box h6 {
  font: 500 20px var(--bd-ff-grotesk-sans);
  max-width: 110px;
}
@media only screen and (min-width: 768px) {
  .about-single-box h6 {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .about-single-box h6 {
    margin-bottom: 0px;
  }
}
.about-single-box .section-text-five {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .about-single-box .section-text-five {
    padding-right: 20px;
    max-width: 490px;
  }
}

.about-main-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 0;
}
@media only screen and (min-width: 1200px) {
  .about-main-wrapper {
    grid-template-columns: 200px 1fr;
  }
}
@media only screen and (min-width: 1400px) {
  .about-main-wrapper {
    grid-template-columns: 230px 1fr;
  }
}

.founder-author {
  display: flex;
  margin: 110px 0 15px 0;
}
.founder-author .founder-author-thumb {
  height: 100px;
  width: 100px;
  outline: 3px solid var(--bd-white);
  background-color: var(--bd-text-secondary);
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 50%;
}
.founder-author .founder-author-thumb:not(:first-child) {
  margin-left: -7px;
}

.about-five-thumb-two {
  overflow: hidden;
  border-radius: 20px 20px 20px 0;
}
.about-five-thumb-two img {
  height: 100%;
  width: 100%;
}

.about-five-thumb {
  overflow: hidden;
  border-radius: 20px 0px 20px 20px;
}
.about-five-thumb img {
  width: 100%;
  height: 100%;
}

.about-content .circle-img {
  display: inline-block;
  position: relative;
}
.about-content .circle-img .rotate-text {
  animation: spinner 11s infinite linear;
}
@media only screen and (min-width: 768px) {
  .about-content .circle-img .rotate-text {
    width: 170px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-content .circle-img .rotate-text {
    width: inherit;
  }
}
.about-content .circle-img .circle-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .about-content .circle-img .circle-shape {
    width: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-content .circle-img .circle-shape {
    width: inherit;
  }
}

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

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

.we-do-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1620px;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .we-do-wrapper {
    grid-template-columns: 50% 1fr;
  }
}
@media only screen and (min-width: 1600px) {
  .we-do-wrapper {
    grid-template-columns: 780px 800px 1fr;
  }
}

.we-do-thumb {
  position: relative;
  height: fit-content;
}
.we-do-thumb .video-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.we-do-thumb .video-btn .video-play-btn {
  background-color: var(--bd-black);
  color: var(--bd-white);
}

.we-do-title-wrapper > span {
  font: 400 20px var(--bd-ff-grotesk-sans);
  color: var(--bd-text-secondary);
  display: inline-block;
  margin-bottom: 5px;
}
.we-do-title-wrapper .we-do-title {
  font: 500 30px/1.1 var(--bd-ff-grotesk-sans);
  color: var(--bd-white);
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1400px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 1600px) {
  .we-do-title-wrapper .we-do-title {
    font-size: 70px;
  }
}

.we-do-content {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media only screen and (min-width: 768px) {
  .we-do-content {
    padding: 40px;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 1200px) {
  .we-do-content {
    padding: 100px 80px;
  }
}
.we-do-content p {
  color: var(--bd-text-secondary);
}
@media only screen and (min-width: 768px) {
  .we-do-content p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .we-do-content p {
    padding-right: 50px;
    font-size: 20px;
  }
}

.about-thumb-wrapper {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .about-thumb-wrapper {
    padding-right: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-thumb-wrapper {
    padding-right: 100px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-thumb-wrapper {
    padding-right: 120px;
  }
}
.about-thumb-wrapper .experience-wrapper-2 {
  position: absolute;
  right: 0px;
  top: -60px;
  background-color: var(--bd-primary);
  color: black;
  padding: 20px 10px;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .about-thumb-wrapper .experience-wrapper-2 {
    right: 25px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-thumb-wrapper .experience-wrapper-2 {
    padding: 50px 70px;
    right: 70px;
  }
}
.about-thumb-wrapper .experience-wrapper-2::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  border-left: 10px solid var(--bd-white);
  border-top: 10px solid var(--bd-white);
}
.about-thumb-wrapper .experience-wrapper-2 .experience-number {
  font: 700 30px var(--bd-ff-epilogue-sans);
  position: relative;
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .about-thumb-wrapper .experience-wrapper-2 .experience-number {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .about-thumb-wrapper .experience-wrapper-2 .experience-number {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-thumb-wrapper .experience-wrapper-2 .experience-number {
    font-size: 240px;
  }
}
.about-thumb-wrapper .experience-wrapper-2 .experience-number span {
  font-weight: 500;
  font-size: 30px;
  position: absolute;
  right: -15px;
  top: 0px;
  line-height: 1;
}
@media only screen and (min-width: 992px) {
  .about-thumb-wrapper .experience-wrapper-2 .experience-number span {
    background-color: var(--bd-primary);
    font-size: 30px;
    right: 0;
  }
}
@media only screen and (min-width: 1600px) {
  .about-thumb-wrapper .experience-wrapper-2 .experience-number span {
    font-size: 40px;
  }
}
.about-thumb-wrapper .experience-wrapper-2 p {
  font: 400 16px/1.4 var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  margin: auto;
  max-width: 130px;
}
@media only screen and (min-width: 576px) {
  .about-thumb-wrapper .experience-wrapper-2 p {
    max-width: 130px;
  }
}
@media only screen and (min-width: 992px) {
  .about-thumb-wrapper .experience-wrapper-2 p {
    margin-top: -20px;
    font-size: 18px;
    max-width: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-thumb-wrapper .experience-wrapper-2 p {
    font-size: 20px;
  }
}

.about-large-thumb {
  overflow: hidden;
}
.about-large-thumb img {
  width: 100%;
}

.about-six-top-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 60px;
  gap: 40px 0;
  justify-items: center;
}
@media only screen and (min-width: 768px) {
  .about-six-top-wrapper {
    grid-template-columns: 1fr 160px;
    justify-items: start;
    align-items: center;
  }
}
@media only screen and (min-width: 992px) {
  .about-six-top-wrapper {
    align-items: start;
    margin-bottom: 80px;
  }
}
.about-six-top-wrapper h2 {
  font: 500 28px/1.3 var(--bd-ff-epilogue-sans);
  letter-spacing: -2%;
}
@media only screen and (min-width: 576px) {
  .about-six-top-wrapper h2 {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .about-six-top-wrapper h2 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-six-top-wrapper h2 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-six-top-wrapper h2 {
    font-size: 60px;
  }
}
.about-six-top-wrapper h2 span {
  font-style: italic;
  font-weight: 300;
}
@media only screen and (min-width: 992px) {
  .about-six-top-wrapper .title-left {
    margin-left: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-six-top-wrapper .title-left {
    margin-left: 150px;
  }
}

.brand-circle-text .circle-img {
  max-width: 140px;
  position: relative;
}
.brand-circle-text .circle-img .rotate-text {
  animation: spinner 7s infinite linear;
}
.brand-circle-text .circle-img .circle-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.about-six-bottom-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}
@media only screen and (min-width: 992px) {
  .about-six-bottom-wrapper {
    flex-direction: row;
  }
}

.text-left {
  flex: 0 0 auto;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .text-left {
    width: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .text-left {
    width: 400px;
  }
}

.text-sticky {
  display: inline-block;
  font: 400 18px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  position: relative;
  text-align: center;
  padding-bottom: 60px;
  height: fit-content;
  flex: 0 0 100%;
}
@media only screen and (min-width: 992px) {
  .text-sticky {
    font-size: 20px;
    padding-bottom: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .text-sticky {
    font-size: 20px;
    padding-bottom: 140px;
  }
}
.text-sticky::before {
  position: absolute;
  content: "";
  height: 50px;
  width: 1px;
  background-color: var(--bd-black);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 992px) {
  .text-sticky::before {
    height: 80px;
  }
}

.about-img-slider-active {
  z-index: 2;
}

.about-img-slider-box {
  margin-top: 60px;
  max-width: 1225px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .about-img-slider-box {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .about-img-slider-box {
    margin-top: 80px;
    max-width: 765px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-img-slider-box {
    max-width: 960px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-img-slider-box {
    max-width: 950px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-img-slider-box {
    max-width: 1225px;
  }
}
.about-img-slider-box .swiper-pagination {
  left: -45px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  .about-img-slider-box .swiper-pagination {
    left: 50%;
    transform: translateX(-50%);
    bottom: -25px;
    top: inherit;
    flex-direction: row;
    gap: 10px;
  }
}
@media only screen and (min-width: 576px) {
  .about-img-slider-box .swiper-pagination {
    left: -20px;
  }
}
@media only screen and (min-width: 992px) {
  .about-img-slider-box .swiper-pagination {
    left: -30px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-img-slider-box .swiper-pagination {
    left: -45px;
  }
}
.about-img-slider-box .swiper-pagination .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  opacity: 1;
  background-color: transparent;
  border: 2px solid var(--bd-black);
}
.about-img-slider-box .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--bd-black);
  transform: scale(1.4);
}

@media only screen and (min-width: 1200px) {
  .about-content-box .content-inner {
    max-width: 560px;
  }
}
.about-content-box .content-inner p, .about-content-box .content-inner li {
  font: 400 16px/1.65 var(--bd-ff-poppins-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .about-content-box .content-inner p, .about-content-box .content-inner li {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .about-content-box .content-inner p, .about-content-box .content-inner li {
    font-size: 20px;
    line-height: 1.4;
  }
}
.about-content-box .content-inner ul {
  margin-bottom: 30px;
}
.about-content-box .content-inner .contact-btn a {
  font: 400 16px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .about-content-box .content-inner .contact-btn a {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .about-content-box .content-inner .contact-btn a {
    font-size: 20px;
  }
}

.about-style-seven {
  position: relative;
  background-color: var(--bd-white);
  border-radius: 0 0 30px 30px;
}
.about-style-seven::before {
  position: absolute;
  height: 100%;
  width: 98%;
  background-color: #B9B9B9;
  content: "";
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
  border-radius: 15px;
}
.about-style-seven::after {
  position: absolute;
  height: 100%;
  width: 96%;
  background-color: #888888;
  content: "";
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -5;
  border-radius: 15px;
}

.about-seven-right .section-title-seven {
  max-width: 500px;
  margin-bottom: 20px;
}
.about-seven-right .section-text-seven {
  margin-bottom: 50px;
}
@media only screen and (min-width: 1200px) {
  .about-seven-right .section-text-seven {
    margin-bottom: 80px;
  }
}
.about-seven-right .experience-shape {
  text-align: center;
  margin-bottom: 50px;
}
@media only screen and (min-width: 1200px) {
  .about-seven-right .experience-shape {
    text-align: start;
    margin-bottom: 80px;
  }
}

@media only screen and (min-width: 768px) {
  .about-single-service-box {
    max-width: 420px;
  }
}
.about-single-service-box h5 {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font: 500 22px var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 768px) {
  .about-single-service-box h5 {
    font-size: 24px;
  }
}
.about-single-service-box h5::before {
  position: absolute;
  left: 0;
  top: 5px;
  content: "\e197";
  font-family: var(--bd-ff-fontawesome);
  color: var(--bd-black);
  font-size: 20px;
}
.about-single-service-box p {
  font: 400 17px var(--bd-ff-dm-sans);
  color: #4D4D4D;
}

.blockquote-wrapper {
  margin-top: 50px;
  margin-bottom: 80px;
}
@media only screen and (min-width: 1200px) {
  .blockquote-wrapper {
    margin-top: 120px;
    margin-bottom: 140px;
  }
}
.blockquote-wrapper .icon {
  margin-bottom: 15px;
}
@media only screen and (min-width: 1200px) {
  .blockquote-wrapper .icon {
    margin-bottom: 35px;
  }
}
.blockquote-wrapper .icon img {
  width: 70px;
}
@media only screen and (min-width: 1200px) {
  .blockquote-wrapper .icon img {
    width: 100px;
  }
}
.blockquote-wrapper p {
  font: 400 20px var(--bd-ff-dm-sans);
  padding-bottom: 30px;
  border-bottom: 1px solid #ECECEC;
}
@media only screen and (min-width: 992px) {
  .blockquote-wrapper p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote-wrapper p {
    font-size: 28px;
  }
}
.blockquote-wrapper p span {
  color: #FF6D39;
}
.blockquote-wrapper .avatar-content h5 {
  font: 500 22px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .blockquote-wrapper .avatar-content h5 {
    font-size: 28px;
  }
}
.blockquote-wrapper .avatar-content .designation {
  color: #4D4D4D;
  font: 400 16px var(--bd-ff-dm-sans);
}

.about-seven-left {
  height: 100%;
  position: relative;
}
.about-seven-left .about-shape-box {
  text-align: center;
  margin-top: 50px;
}
.about-seven-left .about-shape-box img {
  animation: spinner 18s infinite linear;
}
@media only screen and (min-width: 768px) {
  .about-seven-left .about-shape-box {
    margin-top: 250px;
  }
}

.about-img-box {
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .about-bottom-thumb {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.about-bottom-thumb > img {
  position: relative;
  z-index: 4;
}
.about-bottom-thumb .img-shape {
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 3;
  animation: spinner 15s infinite linear;
}

/*----------------------------------------*/
/*  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: 600px;
  object-fit: cover;
  object-position: top;
}

.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-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;
}
.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-style-two .avatar-name a {
  background-image: linear-gradient(var(--bd-secondary), var(--bd-secondary)), linear-gradient(var(--bd-secondary), var(--bd-secondary));
}

.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;
  color: #fff;
}
@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: 20px;
}
@media only screen and (min-width: 576px) {
  .blog-content-bottom {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-content-bottom {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-content-bottom {
    margin-top: 20px;
  }
}
.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:#fff;
  border: 1px solid var(--bd-text-secondary);
  border-radius: 20px;
  background-color: var(--bd-primary);
}
@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);
  color: #fff;
}

.blog-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  margin-bottom: 50px;
}
.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: 90%;
    border-radius: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-item .blog-content-wrap {
    padding: 50px;
  }
}
.blog-item img {
  width: 100%;
}

.blog-style-five .section-space-five {
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 768px) {
  .blog-style-five .section-space-five {
    grid-template-columns: 200px 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-style-five .section-space-five {
    grid-template-columns: 200px 480px 1fr;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-style-five .section-space-five {
    grid-template-columns: 260px 580px 1fr;
  }
}

.blog-five-thumb {
  overflow: hidden;
  border-radius: 30px 0 30px 0;
  transition: 0.3s;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .blog-five-thumb {
    margin-bottom: 30px;
  }
}
.blog-five-thumb img {
  width: 100%;
}

.blog-five-single-inner:hover .blog-five-thumb {
  border-radius: 0 30px 0 30px;
}
.blog-five-single-inner:hover .blog-five-thumb img {
  transform: scale(1.08);
}

.blog-five-thumb-content .blog-post-date {
  font: 400 16px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin-bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .blog-five-thumb-content .blog-post-date {
    margin-bottom: 15px;
    font-size: 18px;
  }
}
.blog-five-thumb-content .blog-post-date span {
  color: var(--bd-text-body);
}

.blog-post-title {
  font: 400 22px var(--bd-ff-grotesk-sans);
}
@media only screen and (min-width: 992px) {
  .blog-post-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-post-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-post-title {
    font-size: 32px;
  }
}
.blog-post-title a:hover {
  color: var(--bd-orange);
}

.blog-six-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 0;
  align-items: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .blog-six-top {
    grid-template-columns: 1fr auto;
    margin-bottom: 80px;
  }
}
.blog-six-top h2 {
  font: 500 28px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .blog-six-top h2 {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-six-top h2 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-six-top h2 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-six-top h2 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-six-top h2 {
    font-size: 65px;
  }
}
.blog-six-top .contact-btn a {
  font: 400 16px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 576px) {
  .blog-six-top .contact-btn a {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-six-top .contact-btn a {
    font-size: 20px;
  }
}

.post-avatar-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
@media only screen and (min-width: 576px) {
  .post-avatar-box .blog-meta-wrapper {
    gap: 5px;
  }
}
@media only screen and (min-width: 768px) {
  .post-avatar-box .blog-meta-wrapper {
    gap: 10px;
  }
}
.post-avatar-box .avatar-name {
  font: 400 18px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .post-avatar-box .avatar-name {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .post-avatar-box .avatar-name {
    font-size: 18px;
  }
}
.post-avatar-box .post-date {
  font: 400 16px var(--bd-ff-poppins-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .post-avatar-box .post-date {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .post-avatar-box .post-date {
    font-size: 16px;
  }
}
.post-avatar-box .post-date span {
  margin-right: 7px;
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .post-avatar-box .post-date span {
    margin-right: 4px;
  }
}
@media only screen and (min-width: 768px) {
  .post-avatar-box .post-date span {
    margin-right: 7px;
  }
}
.post-avatar-box .avatar-img {
  border: 0;
}

.blog-post-single:hover .blog-thumb-six img {
  transform: scale(1.08);
}
.blog-post-single:hover .blog-six-title a {
  background-size: 0 2px, 100% 2px;
}

.blog-six-title {
  font: 400 20px/1.45 var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 768px) {
  .blog-six-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-six-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-six-title {
    font-size: 22px;
    line-height: 1.3;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-six-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-six-title {
    font-size: 24px;
  }
}
.blog-six-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;
}

.blog-thumb-six {
  margin-bottom: 25px;
  overflow: hidden;
}

/*----------------------------------------*/
/*  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-primary);
  color: var(--bd-white);
  font-weight: 600;
  padding: 0px 10px;
}

.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: 20px 0px;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}
.home-two-brand::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #E5E5E5;
  animation-name: slideInLeft;
  animation-duration: 2s;
}

.client-brand-single-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--bd-text-secondary);
  border-right: 0;
  border-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .client-brand-single-box {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 768px) {
  .client-brand-single-box {
    grid-template-columns: repeat(5, 1fr);
  }
}

.brand-thumb {
  padding: 30px;
  text-align: center;
  border-right: 1px solid var(--bd-text-secondary);
  border-bottom: 1px solid var(--bd-text-secondary);
}
@media only screen and (min-width: 768px) {
  .brand-thumb {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 992px) {
  .brand-thumb {
    padding: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .brand-thumb {
    padding: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .brand-thumb {
    padding: 60px;
  }
}
@media only screen and (min-width: 1600px) {
  .brand-thumb {
    padding: 100px 70px;
  }
}
.brand-thumb img {
  width: 80px;
}
@media only screen and (min-width: 768px) {
  .brand-thumb img {
    width: inherit;
  }
}

.brand-style-five .section-top-five {
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 768px) {
  .brand-style-five .section-top-five {
    margin-bottom: 70px;
    grid-template-columns: 200px 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .brand-style-five .section-top-five {
    grid-template-columns: 200px 780px 1fr;
  }
}
@media only screen and (min-width: 1400px) {
  .brand-style-five .section-top-five {
    grid-template-columns: 419px 780px 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .brand-style-five .section-top-five .section-text-five {
    margin-left: -350px;
  }
}
@media only screen and (min-width: 768px) {
  .brand-style-five .section-text-five {
    grid-column: 2/span 2;
  }
}
@media only screen and (min-width: 1200px) {
  .brand-style-five .section-text-five {
    grid-column: inherit;
  }
}

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

.brand-slider-six {
  padding: 0 30px;
}
@media only screen and (min-width: 768px) {
  .brand-slider-six {
    padding: 0 50px;
  }
}
.brand-slider-six .brand-img img {
  opacity: 0.7;
}
.brand-slider-six .brand-img:hover img {
  opacity: 1;
}

.happy-client {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 100px;
  align-items: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) {
  .happy-client {
    grid-template-columns: 260px 1fr;
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .happy-client {
    gap: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .happy-client {
    gap: 20px 100px;
  }
}
.happy-client p {
  font: 400 18px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .happy-client p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .happy-client p {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .happy-client p {
    font-size: 24px;
  }
}
.happy-client span {
  display: block;
  border-top: 1px solid var(--bd-text-secondary);
}

/*----------------------------------------*/
/*  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: 500px;
  }
}
.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: 450px;
  object-fit: cover;
  object-position: center;
}

.contact-text h6 {
  font: 700 18px var(--bd-ff-jakarta-sans);
  margin-bottom: 3px;
  color: #fff;
}
.contact-text p {
  color: #fff;
  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%;
  }
}
@media only screen and (min-width: 1200px) {
  .contact-left {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .contact-left {
    padding-right: 50px;
      margin-top: 100px;
  }
}

.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;
    padding-top: 40px;
  }
}

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

.counter-style-five {
  border-top: 1px solid var(--bd-text-secondary);
  border-bottom: 1px solid var(--bd-text-secondary);
}

.counter-main-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (min-width: 992px) {
  .counter-main-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}
.counter-main-wrapper .counter-single {
  padding: 30px 20px;
  position: relative;
  text-align: center;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .counter-main-wrapper .counter-single {
    padding: 50px 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .counter-main-wrapper .counter-single {
    padding: 70px 40px 60px;
  }
}
.counter-main-wrapper .counter-single::before {
  position: absolute;
  content: "";
  height: 4px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--bd-black);
  transition: 0.45s;
  z-index: -1;
}
.counter-main-wrapper .counter-single:not(:last-child) {
  border-right: 1px solid var(--bd-text-secondary);
}
.counter-main-wrapper .counter-single:nth-child(2n+1)::before {
  bottom: 0;
  top: inherit;
}
.counter-main-wrapper .counter-single:nth-child(2) {
  border-right: 0;
}
@media only screen and (min-width: 992px) {
  .counter-main-wrapper .counter-single:nth-child(2) {
    border-right: 1px solid var(--bd-text-secondary);
  }
}
.counter-main-wrapper .counter-single:hover::before {
  height: 100%;
}
.counter-main-wrapper .counter-single:hover h3 {
  color: var(--bd-white);
}
.counter-main-wrapper .counter-single:hover p {
  color: var(--bd-text-secondary);
}
.counter-main-wrapper .counter-single h3 {
  font: 400 40px var(--bd-ff-grotesk-sans);
  color: #AAAAAA;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .counter-main-wrapper .counter-single h3 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .counter-main-wrapper .counter-single h3 {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .counter-main-wrapper .counter-single h3 {
    font-size: 80px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .counter-main-wrapper .counter-single h3 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1600px) {
  .counter-main-wrapper .counter-single h3 {
    font-size: 120px;
    margin-bottom: 150px;
  }
}
.counter-main-wrapper .counter-single p {
  font: 400 20px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .counter-main-wrapper .counter-single p {
    font-size: 18px;
  }
}

.counter-six-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
@media only screen and (min-width: 576px) {
  .counter-six-wrapper {
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .counter-six-wrapper {
    gap: 0;
  }
}

.single-counter-inner {
  padding: 29px 15px;
  width: 150px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--bd-text-secondary);
  flex: 0 0 auto;
}
@media only screen and (min-width: 576px) {
  .single-counter-inner {
    padding: 40px 30px;
    width: 170px;
  }
}
@media only screen and (min-width: 992px) {
  .single-counter-inner {
    padding: 78px 30px;
    width: 240px;
  }
}
@media only screen and (min-width: 1400px) {
  .single-counter-inner {
    padding: 115px 50px;
    width: 350px;
  }
}
@media only screen and (min-width: 768px) {
  .single-counter-inner:not(:first-child) {
    margin-left: -20px;
  }
}
@media only screen and (min-width: 1400px) {
  .single-counter-inner:not(:first-child) {
    margin-left: -35px;
  }
}
.single-counter-inner h3 {
  font: 500 35px var(--bd-ff-epilogue-sans);
  margin-bottom: 5px;
}
@media only screen and (min-width: 992px) {
  .single-counter-inner h3 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .single-counter-inner h3 {
    font-size: 80px;
  }
}
.single-counter-inner p {
  font: 400 16px var(--bd-ff-poppins-sans);
  color: var(--bd-black);
  margin: 0;
}
@media only screen and (min-width: 1400px) {
  .single-counter-inner p {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/*  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: 0px;
    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: 10px;
}
@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: 40px;
  }
}

.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: 30px 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: 50px;
  }
}
.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: 13px;
  width: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: #008600;
  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: center/cover no-repeat;
  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: 768px) {
  .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;
  display: none;
}
@media only screen and (min-width: 768px) {
  .border-shape {
    display: block;
    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;
  }
}
.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;
    margin-right: -50px;
  }
}

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

@media only screen and (min-width: 768px) {
  .service-style-five .section-text-five {
    grid-column: 2/span 2;
  }
}
@media only screen and (min-width: 1200px) {
  .service-style-five .section-text-five {
    grid-column: inherit;
  }
}

.section-top-five {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px 0;
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
  .section-top-five {
    grid-template-columns: 200px 1fr;
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-top-five {
    grid-template-columns: 200px 555px 1fr;
    margin-bottom: 120px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-top-five {
    grid-template-columns: 210px 730px 1fr;
    margin-bottom: 120px;
    align-items: center;
  }
}
@media only screen and (min-width: 1200px) {
  .section-top-five .section-text-five {
    margin-left: -105px;
  }
}

.service-box-left-content span {
  font: 500 20px var(--bd-ff-grotesk-sans);
  display: inline-block;
  margin-bottom: 30px;
  color: var(--bd-black);
}
.service-box-left-content .section-text-five {
  max-width: 80%;
}
.service-box-left-content .section-text-five p {
  color: var(--bd-black);
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .service-box-left-content .section-text-five p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .service-box-left-content .section-text-five p {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .service-box-left-content .section-text-five p {
    margin-bottom: 25px;
  }
}
.service-box-left-content .service-category-title {
  font: 500 30px var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 576px) {
  .service-box-left-content .service-category-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .service-box-left-content .service-category-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) {
  .service-box-left-content .service-category-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-box-left-content .service-category-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-box-left-content .service-category-title {
    font-size: 50px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 1600px) {
  .service-box-left-content .service-category-title {
    font-size: 100px;
  }
}

.service-box-right-content .rotate-img {
  animation: spinner 4s infinite linear;
}
.service-box-right-content .service-image-new img{
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.service-box-right-content .service-btn-two {
  padding-top: 30px;
}
.service-box-right-content ul {
  margin-top: 40px;
}
.service-box-right-content ul li {
  position: relative;
  font: 500 16px var(--bd-ff-dm-sans);
  color: var(--bd-black);
  padding-left: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .service-box-right-content ul li {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .service-box-right-content ul li {
    font-size: 20px;
  }
}
.service-box-right-content ul li::before {
  position: absolute;
  left: -3px;
  font-size: 15px;
  top: 51%;
  transform: translateY(-50%);
  color: var(--bd-black);
  content: "+";
  font-family: var(--bd-ff-fontawesome);
}

.service-btn-two .theme-btn .icon-box {
  background-color: var(--bd-orange);
  color: var(--bd-white);
}
.service-btn-two .theme-btn .text-content {
  background-color: var(--bd-orange);
  color: var(--bd-white);
  font: 500 16px var(--bd-ff-dm-sans);
  letter-spacing: 2%;
  padding: 15px 26px;
}

.service-box {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #F0F0F0;
  border-radius: 20px;
  gap: 40px 0;
  padding: 30px;
  margin-bottom: 30px;
  border: 2px solid var(--bd-black);
}
.service-box:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .service-box {
    grid-template-columns: 1fr 50%;
    justify-items: end;
  }
}
@media only screen and (min-width: 992px) {
  .service-box {
    grid-template-columns: 1fr 300px;
    justify-items: start;
    padding: 60px;
  }
}

.we-do-title-wrapper .service-btn-two .theme-btn .icon-box {
  background-color: var(--bd-white);
  color: var(--bd-black);
  border-color: var(--bd-black);
}
.we-do-title-wrapper .service-btn-two .theme-btn .text-content {
  background-color: var(--bd-white);
  color: var(--bd-black);
}

.service-style-six {
  padding: 50px 0;
  max-width: 1680px;
  overflow: hidden;
  border-radius: 20px;
  margin: auto;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .service-style-six {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 992px) {
  .service-style-six {
    padding: 80px 0;
    border-radius: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-style-six {
    padding: 80px 0 160px 0;
  }
}
.service-style-six::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.7;
  top: 0;
  z-index: 1;
  left: 0;
}
.service-style-six .text-slide .text {
  text-shadow: inherit;
  color: #B8B8B8;
}
.service-style-six .text-slide .text::before {
  color: var(--bd-white);
}
.service-style-six .text-slide:hover svg {
  fill: var(--bd-white);
}
.service-style-six .services-bg-img-1 {
  background: center/cover no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  transform: scale(1.08);
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}
.service-style-six .services-bg-img-1::before {
  position: absolute;
  content: "";
  background-color: var(--bd-black);
  opacity: 0.3;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.service-style-six .services-bg-img-1.active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.text-slide svg {
  width: 30px;
  height: 100%;
  margin-left: -10px;
}
@media only screen and (min-width: 992px) {
  .text-slide svg {
    width: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .text-slide svg {
    width: 50px;
    margin-left: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .text-slide svg {
    width: 60px;
  }
}
@media only screen and (min-width: 1600px) {
  .text-slide svg {
    width: 70px;
  }
}

.services-category-list {
  text-align: center;
  position: relative;
  z-index: 4;
  padding: 30px 30px 0;
}
@media only screen and (min-width: 576px) {
  .services-category-list {
    padding: 40px 40px 0;
  }
}
@media only screen and (min-width: 768px) {
  .services-category-list {
    padding: 40px 50px 0;
  }
}
@media only screen and (min-width: 992px) {
  .services-category-list {
    padding: 60px 70px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .services-category-list {
    padding: 60px 120px 0;
  }
}
.services-category-list li {
  padding-bottom: 10px;
  border-bottom: 1px solid #919191;
  cursor: pointer;
}
@media only screen and (min-width: 576px) {
  .services-category-list li {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .services-category-list li {
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .services-category-list li {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .services-category-list li {
    padding-bottom: 30px;
  }
}
.services-category-list li:hover .list-inner {
  -webkit-text-stroke: 2px var(--bd-white);
}
.services-category-list li:hover .list-inner::before {
  width: 100%;
}
.services-category-list li .list-inner {
  font: 400 32px var(--bd-ff-poppins-sans);
  color: transparent;
  -webkit-text-stroke: 1px var(--bd-text-secondary);
  -webkit-text-fill-color: transparent;
  position: relative;
  font-style: italic;
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .services-category-list li .list-inner {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .services-category-list li .list-inner {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) {
  .services-category-list li .list-inner {
    font-size: 100px;
    font-weight: 500;
    -webkit-text-stroke: 2px var(--bd-text-secondary);
  }
}
@media only screen and (min-width: 1400px) {
  .services-category-list li .list-inner {
    font-size: 120px;
  }
}
.services-category-list li .list-inner::before {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-fill-color: var(--bd-white);
  color: var(--bd-white);
  width: 0;
  white-space: nowrap;
  content: attr(data-hover);
  transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}
.services-category-list li img {
  opacity: 0;
  visibility: hidden;
  width: 25px;
}
@media only screen and (min-width: 576px) {
  .services-category-list li img {
    width: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .services-category-list li img {
    width: inherit;
  }
}
.services-category-list li.active .list-inner {
  -webkit-text-stroke: 2px var(--bd-white);
}
.services-category-list li.active .list-inner::before {
  width: 100%;
}
.services-category-list li.active img {
  transform: translate(8px);
  opacity: 1;
  visibility: visible;
  margin-top: -5px;
}
@media only screen and (min-width: 576px) {
  .services-category-list li.active img {
    margin-top: -10px;
    transform: translate(20px);
  }
}
@media only screen and (min-width: 992px) {
  .services-category-list li.active img {
    margin-top: -30px;
    transform: translate(30px);
  }
}

.service-style-seven {
  background-color: var(--bd-black);
  position: relative;
  z-index: -3;
}

@media only screen and (min-width: 992px) {
  .service-left {
    max-width: 470px;
  }
}
.service-left .sub-title-six {
  margin-bottom: 20px;
  color: var(--bd-white);
}
.service-left .section-title-seven {
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .service-left .section-title-seven {
    padding-right: 30px;
  }
}
.service-left p {
  font: 400 18px var(--bd-ff-dm-sans);
  color: var(--bd-white);
}
@media only screen and (min-width: 768px) {
  .service-left p {
    font-size: 20px;
  }
}

.process-wrapper-two {
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .process-wrapper-two {
    margin-top: 0px;
  }
}

.process-item {
  padding: 20px;
  padding-right: 90px;
  background-color: #2C2C2C;
  border-radius: 21px;
  position: relative;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .process-item {
    padding: 40px;
    padding-right: 240px;
    min-height: 240px;
  }
}
@media only screen and (min-width: 992px) {
  .process-item {
    padding-right: 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-item {
    padding-right: 190px;
  }
}
@media only screen and (min-width: 1400px) {
  .process-item {
    padding-right: 240px;
  }
}
.process-item:not(:last-child) {
  margin-bottom: 20px;
}
.process-item:hover {
  background-color: #FF6D39;
}
.process-item:hover::after {
  color: var(--bd-white);
}
.process-item::after {
  content: attr(data-after);
  position: absolute;
  right: 30px;
  top: 30px;
  font: 400 40px var(--bd-ff-dm-sans);
  transition: 0.3s;
  color: #535353;
}
@media only screen and (min-width: 768px) {
  .process-item::after {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .process-item::after {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-item::after {
    font-size: 80px;
  }
}
.process-item h6 {
  font: 600 18px var(--bd-ff-dm-sans);
  margin-bottom: 10px;
  color: var(--bd-white);
}
@media only screen and (min-width: 768px) {
  .process-item h6 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .process-item h6 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-item h6 {
    font-size: 24px;
  }
}
.process-item p {
  font: 400 16px/1.47 var(--bd-ff-dm-sans);
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .process-item p {
    font-size: 18px;
    line-height: 1.67;
  }
}

/*----------------------------------------*/
/*  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 16px var(--bd-ff-kanit-sans);
  line-height: 25px;
}

@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 16px var(--bd-ff-kanit-sans);
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #555555;
}
.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: 25px;
  }
}

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

.section-space-five {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 50px;
  gap: 15px 0;
}
@media only screen and (min-width: 768px) {
  .section-space-five {
    margin-bottom: 70px;
    grid-template-columns: 200px 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-five {
    margin-bottom: 120px;
    grid-template-columns: 260px 1fr;
  }
}
.section-space-five .section-text-five {
  max-width: 450px;
}
@media only screen and (min-width: 768px) {
  .section-space-five .section-text-five {
    grid-column: 2/span 2;
  }
}
@media only screen and (min-width: 992px) {
  .section-space-five .section-text-five {
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-five .section-text-five {
    grid-column: inherit;
    max-width: 450px;
  }
}

.ratting-wrapper {
  text-align: center;
  max-width: 425px;
  padding: 30px;
  border-radius: 15px;
  background-color: #F1F1F1;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .ratting-wrapper {
    padding: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .ratting-wrapper {
    padding: 80px 78px;
  }
}
.ratting-wrapper .testimonil-ratting {
  color: #FFA64D;
  margin-bottom: 10px;
}
.ratting-wrapper span {
  font: 400 16px var(--bd-ff-dm-sans);
  display: block;
  color: var(--bd-text-body);
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .ratting-wrapper span {
    margin-bottom: 40px;
    font-weight: 500;
  }
}
.ratting-wrapper p {
  font: 400 18px/1.55 var(--bd-ff-grotesk-sans);
  color: var(--bd-black);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) {
  .ratting-wrapper p {
    font-size: 20px;
  }
}
.ratting-wrapper .ratting-point {
  font: 500 40px var(--bd-ff-grotesk-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .ratting-wrapper .ratting-point {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .ratting-wrapper .ratting-point {
    font-size: 70px;
  }
}

.testimonil-top-ratting {
  font: 600 36px var(--bd-ff-dm-sans);
  display: inline-flex;
  width: 100%;
  align-items: center;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--bd-text-secondary);
}
.testimonil-top-ratting span {
  font-size: 16px;
  display: inline-block;
  margin-left: 7px;
  color: #FFA64D;
}

.testimonial-single-box p {
  font: 500 20px var(--bd-ff-grotesk-sans);
  color: var(--bd-black);
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) {
  .testimonial-single-box p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-single-box p {
    font-size: 32px;
  }
}

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

.avatar-wrapper.testimonial-avatar {
  padding-top: 0;
  border: 0;
}
.avatar-wrapper.testimonial-avatar .avatar-thumb {
  border-color: #E5E5E5;
}
.avatar-wrapper.testimonial-avatar .avatar-content h5 {
  font: 500 20px var(--bd-ff-dm-sans);
  color: var(--bd-black);
}
.avatar-wrapper.testimonial-avatar .avatar-content .designation {
  font: 400 16px var(--bd-ff-dm-sans);
}

.testimonial-five-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  gap: 30px 0;
}
@media only screen and (min-width: 576px) {
  .testimonial-five-wrapper {
    grid-template-columns: 400px 1fr;
    justify-items: end;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-five-wrapper {
    grid-template-columns: 540px 1fr;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-five-wrapper {
    grid-template-columns: 410px 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-five-wrapper {
    grid-template-columns: 540px 1fr;
  }
}

.testimonial-five-slider {
  width: 100%;
}
.testimonial-five-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.testimonial-five-slider .swiper-slide {
  opacity: 0.2;
  transition: 0.5s;
}

@media only screen and (min-width: 576px) {
  .navigation__wrapper.navigation-style-five {
    margin-top: 70px;
    flex-direction: column;
    gap: 30px;
  }
}
.navigation__wrapper.navigation-style-five button {
  height: 55px;
  width: 55px;
  border: 2px solid #4B4B4B;
  font-size: 16px;
  background-color: transparent;
}
@media only screen and (min-width: 1200px) {
  .navigation__wrapper.navigation-style-five button {
    height: 80px;
    width: 80px;
    font-size: 20px;
  }
}
.navigation__wrapper.navigation-style-five button:hover {
  background-color: var(--bd-orange);
  border-color: var(--bd-orange);
  color: var(--bd-white);
}
.navigation__wrapper.navigation-style-five i {
  transform: rotate(145deg);
}

.testimonial-five-slider {
  height: 350px;
}
@media only screen and (min-width: 576px) {
  .testimonial-five-slider {
    height: 380px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-five-slider {
    height: 630px;
  }
}

.text-slide {
  display: flex;
  gap: 20px;
}
.text-slide:hover .text:before {
  width: 100%;
}
.text-slide:hover svg {
  fill: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .text-slide span {
    margin-top: 10px;
  }
}
.text-slide .text {
  font: 400 35px var(--bd-ff-epilogue-sans);
  text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
  color: var(--bd-primary);
  font-style: italic;
  position: relative;
  cursor: pointer;
}
@media only screen and (min-width: 576px) {
  .text-slide .text {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .text-slide .text {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) {
  .text-slide .text {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .text-slide .text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .text-slide .text {
    font-size: 100px;
  }
}
.text-slide .text:before {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  font-style: italic;
  width: 0;
  color: var(--bd-black);
  white-space: nowrap;
  content: attr(data-hover);
  transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

.text-slider-two-active .swiper-wrapper {
  transition-timing-function: linear;
}

.testimonial-six-top {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .testimonial-six-top {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-six-top {
    margin-bottom: 120px;
  }
}

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

.slider-thumb-wrapper .thumb-pagination .swiper-pagination {
  position: inherit;
  text-align: start;
  margin-top: 20px;
  font: 400 20px var(--bd-ff-epilogue-sans);
}
@media only screen and (min-width: 992px) {
  .slider-thumb-wrapper .thumb-pagination .swiper-pagination {
    margin-top: 50px;
  }
}

.testimonial-six-content {
  display: grid;
  grid-template-columns: 40px 1fr;
}
.testimonial-six-content p {
  font: 400 20px/1.55 var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
  margin: 0;
}
@media only screen and (min-width: 576px) {
  .testimonial-six-content p {
    font-size: 22px;
    line-height: 1.45;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-six-content p {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-six-content p {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-six-content p {
    font-size: 28px;
  }
}

.testimonial-six-wrapper {
  background-color: var(--bd-primary);
  border-radius: 20px;
  max-width: 1680px;
  margin: auto;
  padding: 80px 0;
}
@media only screen and (min-width: 768px) {
  .testimonial-six-wrapper {
    padding: 100px 0;
    border-radius: 38px;
  }
}

.avatar-wrapper.testimonial-avatar-two {
  padding-top: 0;
  border: 0;
}
.avatar-wrapper.testimonial-avatar-two .avatar-content h5 {
  font: 500 20px var(--bd-ff-epilogue-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 992px) {
  .avatar-wrapper.testimonial-avatar-two .avatar-content h5 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .avatar-wrapper.testimonial-avatar-two .avatar-content h5 {
    font-size: 28px;
  }
}
.avatar-wrapper.testimonial-avatar-two .avatar-content .designation {
  font: 400 16px var(--bd-ff-poppins-sans);
  color: var(--bd-black);
}
@media only screen and (min-width: 1200px) {
  .avatar-wrapper.testimonial-avatar-two .avatar-content .designation {
    font-size: 18px;
  }
}
.avatar-wrapper.testimonial-avatar-two .avatar-thumb {
  height: 80px;
  width: 80px;
  border: 2px solid var(--bd-white);
}

/*----------------------------------------*/
/*  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: 100px;
  }
}
.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-color: #000;
  /* 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.5;
}
.featured-img:hover::before {
  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);
}
.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-white);
  position: relative;
  z-index: 2;
}
.agency-area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  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;
    color: var(--bd-primary);
  }
}

.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: #000;
  position: absolute;
  bottom: -52PX;
  right: 20px;
  z-index: -1;
  opacity: 0.2;
}
@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-dm-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: 30px;
  }
}
.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: 520px;
  }
}

.feature-gallery-content h2 {
  font: 400 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: 128px;
  }
}
.feature-gallery-content h2 span {
  color: var(--bd-black);
}
.feature-gallery-content p {
  font: 400 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: 32px;
    max-width: 200px;
    margin-top: -15px;
  }
}

.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: 520px;
  }
}
.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: 120px;
  }
}
@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: 220px;
  }
}
@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: 280px;
  }
}
@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: 340px;
  }
}
@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: 400 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: 30px;
  }
}
.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: 340px;
    width: 340px;
    border: 13px solid #F3F1ED;
  }
}
.funding-wrapper p {
  font: 400 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: 400 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);
}

.work-main-wrapper .work-single-inner {
  background: center/cover no-repeat;
  padding: 30px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.work-main-wrapper .work-single-inner:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .work-main-wrapper .work-single-inner {
    padding: 60px;
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .work-main-wrapper .work-single-inner {
    padding: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .work-main-wrapper .work-single-inner {
    padding: 140px;
  }
}
@media only screen and (min-width: 1600px) {
  .work-main-wrapper .work-single-inner {
    padding: 160px;
  }
}
.work-main-wrapper .work-single-inner::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.6;
}
.work-main-wrapper .work-single-inner .work-list {
  font: 400 18px var(--bd-ff-dm-sans);
  letter-spacing: 2%;
  color: var(--bd-white);
  display: block;
  text-align: end;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .work-main-wrapper .work-single-inner .work-list {
    font-size: 24px;
  }
}

.work-box {
  margin-bottom: 30px;
}
.work-box .work-thumb {
  margin-bottom: 10px;
  position: relative;
}
.work-box .work-thumb .marquee {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .work-box .work-thumb .marquee {
    width: 470px;
  }
}
@media only screen and (min-width: 768px) {
  .work-box .work-thumb .marquee {
    width: 500px;
  }
}
@media only screen and (min-width: 992px) {
  .work-box .work-thumb .marquee {
    width: 520px;
  }
}
@media only screen and (min-width: 1400px) {
  .work-box .work-thumb .marquee {
    width: 600px;
  }
}
@media only screen and (min-width: 1600px) {
  .work-box .work-thumb .marquee {
    width: 670px;
  }
}
.work-box .work-thumb .marquee span {
  font: 500 40px var(--bd-ff-grotesk-sans);
  will-change: transform;
  transform: translateX(0);
  white-space: nowrap;
  animation: marquee-slideLeft 10s linear infinite;
  padding-right: 80px;
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .work-box .work-thumb .marquee span {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .work-box .work-thumb .marquee span {
    font-size: 60px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .work-box .work-thumb .marquee span {
    font-size: 70px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 1400px) {
  .work-box .work-thumb .marquee span {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1600px) {
  .work-box .work-thumb .marquee span {
    font-size: 100px;
  }
}
.work-box p {
  font: 400 18px var(--bd-ff-dm-sans);
  margin: 0;
  color: var(--bd-text-secondary);
  position: relative;
  padding-left: 15px;
  display: inline;
}
.work-box p::before {
  position: absolute;
  content: "";
  left: 0;
  top: 10px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: var(--bd-text-secondary);
}

.select-text-img {
  margin-bottom: 40px;
  position: relative;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .select-text-img {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .select-text-img {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .select-text-img {
    margin-bottom: 130px;
  }
}
.select-text-img img {
  width: 200px;
}
@media only screen and (min-width: 576px) {
  .select-text-img img {
    width: 250px;
  }
}
@media only screen and (min-width: 768px) {
  .select-text-img img {
    width: 400px;
  }
}
@media only screen and (min-width: 1200px) {
  .select-text-img img {
    width: 640px;
  }
}

.single-select-work .select-thumb {
  margin-bottom: 15px;
  overflow: hidden;
}
.single-select-work .select-work-content span {
  font: 400 16px var(--bd-ff-poppins-sans);
  color: var(--bd-text-body);
  display: block;
}
@media only screen and (min-width: 768px) {
  .single-select-work .select-work-content span {
    font-size: 18px;
  }
}

.select-work-title {
  font: 500 20px var(--bd-ff-epilogue-sans);
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .select-work-title {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) {
  .select-work-title {
    font-size: 22px;
  }
}
.select-work-title a:hover {
  color: var(--bd-primary);
}

.select-work-wrapper {
  max-width: 1820px;
  margin: auto;
  padding: 0 20px;
}
@media only screen and (min-width: 768px) {
  .select-work-wrapper {
    padding: 0;
  }
}
.select-work-wrapper .select-work-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  justify-content: center;
}
@media only screen and (min-width: 576px) {
  .select-work-wrapper .select-work-box {
    grid-template-columns: 250px 250px;
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .select-work-wrapper .select-work-box {
    grid-template-columns: 320px 320px;
  }
}
@media only screen and (min-width: 992px) {
  .select-work-wrapper .select-work-box {
    grid-template-columns: 440px 440px;
    justify-content: center;
  }
}
@media only screen and (min-width: 1200px) {
  .select-work-wrapper .select-work-box {
    grid-template-columns: 480px 480px;
    gap: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .select-work-wrapper .select-work-box {
    grid-template-columns: 615px 615px;
    gap: 30px 120px;
  }
}
@media only screen and (min-width: 1600px) {
  .select-work-wrapper .select-work-box {
    gap: 30px 320px;
    justify-content: end;
  }
}
.select-work-wrapper .select-work-box:nth-child(2n) {
  justify-content: center;
}
@media only screen and (min-width: 1600px) {
  .select-work-wrapper .select-work-box:nth-child(2n) {
    justify-content: start;
  }
}
.select-work-wrapper .select-work-box:not(:last-child) {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .select-work-wrapper .select-work-box:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .select-work-wrapper .select-work-box:not(:last-child) {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .select-work-wrapper .select-work-box:not(:last-child) {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1600px) {
  .select-work-wrapper .select-work-box:not(:last-child) {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .select-work-wrapper .select-work-box .single-select-work:first-child {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .select-work-wrapper .select-work-box .single-select-work:first-child {
    margin-top: 90px;
  }
}
@media only screen and (min-width: 1200px) {
  .select-work-wrapper .select-work-box .single-select-work:first-child {
    margin-top: 110px;
  }
}
@media only screen and (min-width: 1600px) {
  .select-work-wrapper .select-work-box .single-select-work:first-child {
    margin-top: 180px;
  }
}

.work-btn {
  text-align: center;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .work-btn {
    text-align: end;
    margin-top: 0;
  }
}
.work-btn a {
  position: relative;
  font: 500 16px var(--bd-ff-epilogue-sans);
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .work-btn a {
    font-size: 20px;
  }
}
.work-btn a:hover .text {
  color: var(--bd-primary);
}
.work-btn a:hover i {
  transform: rotate(0deg);
}
.work-btn a:hover .icon {
  color: var(--bd-black);
}
.work-btn a .icon {
  height: 45px;
  width: 45px;
  background-color: var(--bd-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .work-btn a .icon {
    height: 70px;
    width: 70px;
  }
}
.work-btn a i {
  transition: 0.3s;
  transform: rotate(-45deg);
}

.featured-blog-wrapper {
  min-height: 555px;
}
@media only screen and (min-width: 1200px) {
  .featured-blog-wrapper {
    min-height: 555px;
  }
}
@media only screen and (min-width: 1400px) {
  .featured-blog-wrapper {
    min-height: 645px;
  }
}

@media only screen and (min-width: 768px) {
  .section-text-seven {
    grid-column: 2/span 2;
  }
}
@media only screen and (min-width: 1200px) {
  .section-text-seven {
    grid-column: inherit;
  }
}

.section-top-seven {
  display: grid;
  gap: 30px 50px;
  grid-template-columns: 1fr;
  margin-bottom: 50px;
}
@media only screen and (min-width: 576px) {
  .section-top-seven {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .section-top-seven {
    margin-bottom: 80px;
    grid-template-columns: 200px 1fr;
    gap: 20px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-top-seven {
    margin-bottom: 80px;
    grid-template-columns: 260px 1fr 340px;
    gap: 30px 50px;
  }
}
.section-top-seven .section-text-seven p {
  margin-bottom: 0;
}

.featured-box-title {
  font: 500 22px var(--bd-ff-dm-sans);
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .featured-box-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-box-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .featured-box-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .featured-box-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .featured-box-title {
    font-size: 32px;
  }
}
.featured-box-title span {
  font-size: 16px;
  flex: 0 0 auto;
}
.featured-box-title a {
  display: inline-flex;
  gap: 0 7px;
}

.featured-box-thumb {
  border-radius: 14px;
  overflow: hidden;
  height: 210px;
  margin-bottom: 20px;
  transition: 0.5s;
}
@media only screen and (min-width: 992px) {
  .featured-box-thumb {
    height: 0;
  }
}
.featured-box-thumb img {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 576px) {
  .featured-box-btn .btn-border {
    padding: 5px 5px 5px 15px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-box-btn .btn-border {
    padding: 5px 5px 5px 20px;
  }
}
@media only screen and (min-width: 576px) {
  .featured-box-btn .btn-border .icon-box {
    padding: 6px 10px;
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .featured-box-btn .btn-border .icon-box {
    padding: 8px 13px;
    margin-left: 15px;
  }
}

.featured-box {
  padding: 20px;
  background-color: #EFEFEF;
  border-radius: 21px;
}
@media only screen and (min-width: 768px) {
  .featured-box {
    padding: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .featured-box {
    padding: 60px 40px;
  }
}
.featured-box p {
  font: 400 18px var(--bd-ff-dm-sans);
  color: #4D4D4D;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-box.active .featured-box-thumb {
  height: 210px;
  margin-bottom: 20px;
}
.featured-box.active .featured-box-thumb img {
  width: 100%;
}

.text-slider-item {
  display: flex;
  gap: 15px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .text-slider-item {
    gap: 40px;
  }
}
.text-slider-item img {
  width: 30px;
}
@media only screen and (min-width: 992px) {
  .text-slider-item img {
    width: 50px;
  }
}

.text-slide-title {
  font: 400 30px var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 768px) {
  .text-slide-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .text-slide-title {
    font-size: 60px;
  }
}
.text-slide-title span {
  font-family: var(--bd-ff-playfair-sans);
}

.text-slider-three-active .swiper-wrapper {
  transition-timing-function: linear !important;
  display: flex;
  gap: 15px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .text-slider-three-active .swiper-wrapper {
    gap: 40px;
  }
}
.text-slider-three-active .swiper-wrapper .swiper-slide {
  width: auto;
}

.case-style-two {
  position: relative;
  background-color: var(--bd-white);
  border-radius: 30px 30px 0 0;
  margin-top: -30px;
}
.case-style-two::before {
  position: absolute;
  height: 100%;
  width: 98%;
  background-color: #B9B9B9;
  content: "";
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 15px;
}
.case-style-two::after {
  position: absolute;
  height: 100%;
  width: 96%;
  background-color: #888888;
  content: "";
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
  border-radius: 15px;
}

.case-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 575px) {
  .case-content {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
}
.case-content h4 {
  font: 500 17px var(--bd-ff-dm-sans);
}
@media only screen and (min-width: 576px) {
  .case-content h4 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .case-content h4 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 992px) {
  .case-content h4 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-content h4 {
    font-size: 32px;
  }
}
.case-content h4 a:hover {
  color: #FF6D39;
}

.case-link-icon a {
  height: 35px;
  width: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-white);
  background-color: #FF6D39;
  border-radius: 11px;
}
@media only screen and (min-width: 768px) {
  .case-link-icon a {
    height: 50px;
    width: 50px;
  }
}
.case-link-icon a:hover i {
  transform: rotate(-45deg);
}
.case-link-icon a i {
  transition: 0.3s;
}

.case-item-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: space-between;
}
.case-item-box:not(:last-child) {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .case-item-box:not(:last-child) {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 576px) {
  .case-item-box {
    gap: 35px;
  }
}
@media only screen and (min-width: 1400px) {
  .case-item-box {
    grid-template-columns: 615px 615px;
    gap: 30px 50px;
  }
}

@media only screen and (min-width: 768px) {
  .case-single-item:last-child {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .case-single-item:last-child {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .case-single-item:last-child {
    margin-top: 100px;
  }
}
.case-single-item:hover img {
  transform: scale(1.06);
}
.case-single-item .case-thumb {
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 21px;
}
.case-single-item .case-thumb img {
  width: 100%;
}

.portfolio-slicer-slide-area .swiper {
  width: 100%;
  height: 100%;
}
.portfolio-slicer-slide-area .slider-navigation {
  bottom: inherit;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
  z-index: 4;
  height: fit-content;
}
@media only screen and (min-width: 768px) {
  .portfolio-slicer-slide-area .slider-navigation {
    padding: 0 50px;
  }
}
@media only screen and (min-width: 992px) {
  .portfolio-slicer-slide-area .slider-navigation {
    padding: 0 100px;
  }
}
.portfolio-slicer-slide-area .slider-navigation button {
  font-size: 20px;
}

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

.team-style-five {
  padding-top: 80px;
}
@media only screen and (min-width: 992px) {
  .team-style-five {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-style-five {
    padding-top: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .team-style-five {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-style-five {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 1600px) {
  .team-style-five {
    padding-top: 0;
  }
}
.team-style-five .team-img-content span {
  font: 400 18px var(--bd-ff-dm-sans);
  font-style: italic;
}

.large-title-top {
  padding-bottom: 40px;
}
@media only screen and (min-width: 1400px) {
  .large-title-top {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1600px) {
  .large-title-top {
    padding-bottom: 80px;
  }
}

.team-large-title {
  font: 500 32px var(--bd-ff-grotesk-sans);
}
@media only screen and (min-width: 576px) {
  .team-large-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .team-large-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .team-large-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) {
  .team-large-title {
    font-size: 300px;
  }
}
@media only screen and (min-width: 1400px) {
  .team-large-title {
    font-size: 400px;
  }
}
@media only screen and (min-width: 1600px) {
  .team-large-title {
    font-size: 600px;
  }
}

.team-style-seven {
  background-color: var(--bd-black);
  padding-top: 130px;
  margin-top: -30px;
  z-index: -8;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .team-style-seven {
    padding-top: 170px;
  }
}
.team-style-seven .team-top-content {
  max-width: 480px;
  margin: auto;
  margin-bottom: 40px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .team-style-seven .team-top-content {
    margin: auto;
    margin-bottom: 80px;
  }
}
.team-style-seven .team-top-content .sub-title-six {
  color: var(--bd-white);
  margin-bottom: 20px;
}

.team-wrapper-seven:hover img {
  transform: scale(1.08);
}

.team-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  margin-bottom: 30px;
}
.team-thumb img {
  width: 100%;
}
@media (max-width: 575px) {
  .team-thumb img {
    aspect-ratio: 100/100;
    object-position: top;
  }
}
.team-thumb .team-social {
  right: 20px;
  bottom: 20px;
  position: absolute;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6c6c6c;
  border-radius: 50%;
}
.team-thumb .team-social:hover::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.team-thumb .team-social:hover ul {
  top: -134px;
  opacity: 1;
  visibility: visible;
}
.team-thumb .team-social::before, .team-thumb .team-social::after {
  position: absolute;
  content: "";
  height: 1.5px;
  width: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bd-white);
  transition: 0.3s;
}
.team-thumb .team-social::after {
  height: 16px;
  width: 1.5px;
}
.team-thumb .team-social ul {
  display: flex;
  flex-direction: column;
  gap: 17px;
  justify-content: center;
  background: #6c6c6c;
  border-radius: 24px;
  position: absolute;
  top: -154px;
  text-align: center;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s;
  padding: 14px 17px;
}
.team-thumb .team-social ul li a {
  color: var(--bd-white);
}
.team-thumb .team-social ul li a:hover {
  color: #FF6D39;
}

.tem-content .team-author-title {
  font: 600 22px var(--bd-ff-dm-sans);
  color: var(--bd-white);
  margin-bottom: 3px;
}
@media only screen and (min-width: 992px) {
  .tem-content .team-author-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .tem-content .team-author-title {
    font-size: 28px;
    margin-bottom: 5px;
  }
}
.tem-content .team-author-title a:hover {
  color: #FF6D39;
}
.tem-content span {
  font: 400 18px var(--bd-ff-dm-sans);
  display: inline-block;
  color: var(--bd-white);
}
@media only screen and (min-width: 992px) {
  .tem-content span {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/*  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);
}

/*----------------------------------------*/
/*  8.16 Portfolio css
/*----------------------------------------*/
.showcase-slider-active {
  position: relative;
}
.showcase-slider-active .showcase-navigation {
  flex-direction: column;
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .showcase-slider-active .showcase-navigation {
    left: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .showcase-slider-active .showcase-navigation {
    left: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .showcase-slider-active .showcase-navigation {
    left: 100px;
  }
}
.showcase-slider-active .showcase-navigation button {
  border: 1px solid var(--bd-text-secondary);
  color: var(--bd-white);
  background-color: transparent;
  mix-blend-mode: difference;
}
.showcase-slider-active .showcase-navigation .showcase_button_prev i {
  transform: rotate(140deg);
}
.showcase-slider-active .showcase-navigation .showcase_button_next i {
  transform: rotate(-140deg);
}
.showcase-slider-active .showcase-navigation-two {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 25px;
  bottom: 20px;
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .showcase-slider-active .showcase-navigation-two {
    bottom: 30px;
    padding: 0 40px;
  }
}
@media only screen and (min-width: 992px) {
  .showcase-slider-active .showcase-navigation-two {
    padding: 0 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .showcase-slider-active .showcase-navigation-two {
    bottom: 60px;
    padding: 0 100px;
  }
}
.showcase-slider-active .showcase-navigation-two button {
  font: 400 18px var(--bd-ff-jakarta-sans);
  color: var(--bd-white);
  mix-blend-mode: difference;
}
.showcase-slider-active .showcase_pagintion .swiper-pagination {
  position: absolute;
  left: inherit;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: auto;
  height: fit-content;
}
@media only screen and (min-width: 768px) {
  .showcase-slider-active .showcase_pagintion .swiper-pagination {
    right: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .showcase-slider-active .showcase_pagintion .swiper-pagination {
    right: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .showcase-slider-active .showcase_pagintion .swiper-pagination {
    right: 100px;
  }
}
.showcase-slider-active .swiper-slide {
  flex-shrink: 0;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.portfolio-showcase-area {
  padding-top: 88px;
}

.showcase-slider-item {
  background: center/cover no-repeat;
  height: 100vh;
}
.showcase-slider-item .slicer-slide-content {
  top: 30px;
  left: 0px;
  padding: 15px;
}
@media only screen and (min-width: 768px) {
  .showcase-slider-item .slicer-slide-content {
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    left: 160px;
  }
}
@media only screen and (min-width: 992px) {
  .showcase-slider-item .slicer-slide-content {
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    left: 300px;
  }
}
.showcase-slider-item .slicer-slide-content p {
  font: 600 18px var(--bd-ff-jakarta-sans);
  color: var(--bd-white);
  margin-bottom: 5px;
}
@media only screen and (min-width: 992px) {
  .showcase-slider-item .slicer-slide-content p {
    margin-bottom: 20px;
    font-size: 24px;
  }
}

.swiper-slide-active .showcase-slider-item .slicer-slide-content {
  opacity: 1;
  visibility: visible;
}

.showcase_pagintion .swiper-pagination {
  color: var(--bd-white);
}
.showcase_pagintion .swiper-pagination span {
  font: 400 20px var(--bd-ff-kanit-sans);
  color: var(--bd-white);
}
@media only screen and (min-width: 576px) {
  .showcase_pagintion .swiper-pagination span {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .showcase_pagintion .swiper-pagination span {
    font-size: 24px;
  }
}
.showcase_pagintion .swiper-pagination span.swiper-pagination-current {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .showcase_pagintion .swiper-pagination span.swiper-pagination-current {
    font-size: 30px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 1200px) {
  .showcase_pagintion .swiper-pagination span.swiper-pagination-current {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .showcase_pagintion .swiper-pagination span.swiper-pagination-current {
    font-size: 50px;
    margin-right: 30px;
  }
}
@media only screen and (min-width: 1600px) {
  .showcase_pagintion .swiper-pagination span.swiper-pagination-current {
    margin-right: 50px;
  }
}
.showcase_pagintion .swiper-pagination span.swiper-pagination-current::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--bd-white);
  width: 100%;
}

.portfolio-slider .swiper {
  width: 100%;
  box-sizing: border-box;
}

.portfolio-slider {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.portfolio-slider .swiper-slide {
  box-sizing: border-box;
  transition-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
}
@media only screen and (min-width: 576px) {
  .portfolio-slider .swiper-slide {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 768px) {
  .portfolio-slider .swiper-slide {
    padding: 0 20px;
  }
}
.portfolio-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-slider .portfolio-pagination {
  left: 0;
  bottom: -20px;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .portfolio-slider .portfolio-pagination {
    bottom: -50px;
  }
}
.portfolio-slider .slider-navigation {
  bottom: -50px;
}

.container.large {
  max-width: 1850px;
}

.portfolio-pagination {
  position: absolute;
  left: 0;
  bottom: -50px;
  right: 0;
  display: inline-flex;
  gap: 5px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .portfolio-pagination {
    gap: 20px;
  }
}
.portfolio-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 2px;
  background-color: var(--bd-black);
  opacity: 1;
  border-radius: 2px;
  transition: all 0.5s;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .portfolio-pagination .swiper-pagination-bullet {
    width: 30px;
  }
}
.portfolio-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 30px;
}
@media only screen and (min-width: 768px) {
  .portfolio-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 60px;
  }
}

.portfolio-thumb {
  overflow: hidden;
}

.radius-thumb {
  border-radius: 50%;
  transform: rotate(30deg);
}

.portfolio-single-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.portfolio-single-grid:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .portfolio-single-grid {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 576px) {
  .portfolio-single-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 30px;
  }
}
@media only screen and (min-width: 768px) {
  .portfolio-single-grid {
    gap: 0px 50px;
  }
}
.portfolio-single-grid .grid-thumb {
  position: relative;
  height: fit-content;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .portfolio-single-grid .grid-thumb:first-child {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .portfolio-single-grid .grid-thumb:first-child {
    margin-top: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-single-grid .grid-thumb:first-child {
    margin-top: 100px;
  }
}
.portfolio-single-grid .grid-thumb:hover .grid-content {
  left: 25px;
  opacity: 1;
  visibility: visible;
}
.portfolio-single-grid .grid-thumb .grid-content {
  position: absolute;
  left: 55px;
  bottom: 25px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  background-color: var(--bd-white);
  max-width: 280px;
  transition: 0.45s;
}
@media only screen and (min-width: 768px) {
  .portfolio-single-grid .grid-thumb .grid-content {
    padding: 30px;
  }
}
.portfolio-single-grid .grid-thumb .grid-content h5 {
  font: 600 18px var(--bd-ff-jakarta-sans);
  margin-bottom: 5px;
}
@media only screen and (min-width: 992px) {
  .portfolio-single-grid .grid-thumb .grid-content h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-single-grid .grid-thumb .grid-content h5 {
    font-size: 22px;
  }
}
.portfolio-single-grid .grid-thumb .grid-content span {
  font: 400 15px var(--bd-ff-kanit-sans);
  color: var(--bd-text-body);
}
@media only screen and (min-width: 992px) {
  .portfolio-single-grid .grid-thumb .grid-content span {
    font-size: 18px;
  }
}

.single-thumb {
  overflow: hidden;
  border-radius: 21px;
  overflow: hidden;
  transition: 0.5s;
}

.portfolio-single-slide-active {
  padding-bottom: 50px;
}
@media only screen and (min-width: 576px) {
  .portfolio-single-slide-active {
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .portfolio-single-slide-active {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-single-slide-active {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1600px) {
  .portfolio-single-slide-active {
    padding-top: 100px;
  }
}
.portfolio-single-slide-active .portfolio-pagination {
  left: 0;
  bottom: 0px;
  right: 0;
}
@media only screen and (min-width: 576px) {
  .portfolio-single-slide-active .swiper-slide-active .single-thumb {
    margin-top: -30px;
  }
}
@media only screen and (min-width: 992px) {
  .portfolio-single-slide-active .swiper-slide-active .single-thumb {
    margin-top: -50px;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-single-slide-active .swiper-slide-active .single-thumb {
    margin-top: -80px;
  }
}
@media only screen and (min-width: 1600px) {
  .portfolio-single-slide-active .swiper-slide-active .single-thumb {
    margin-top: -100px;
  }
}

.slider-navigation {
  display: flex;
  position: absolute;
  bottom: 0px;
  left: 0;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.slider-navigation button {
  font: 400 16px var(--bd-ff-kanit-sans);
  display: flex;
  gap: 10px;
  align-items: center;
}
@media only screen and (min-width: 576px) {
  .slider-navigation button {
    font-size: 18px;
  }
}

#app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-slider {
  position: relative;
  z-index: 1;
}

.swiper-slicer-image {
  max-width: unset;
}

.slicer-slide-content {
  position: absolute;
  left: 20px;
  bottom: 40px;
  max-width: 460px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
@media only screen and (min-width: 768px) {
  .slicer-slide-content {
    left: 50px;
    bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .slicer-slide-content {
    left: 100px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .slicer-slide-content {
    bottom: 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .slicer-slide-content {
    bottom: 100px;
  }
}
.slicer-slide-content span {
  display: inline-block;
  font: 700 40px var(--bd-ff-kanit-sans);
  color: transparent;
  -webkit-text-stroke: 1px var(--bd-black);
  stroke-width: 2px;
}
.slicer-slide-content .slicer-slide-title {
  font: 700 30px/1.1 var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
  .slicer-slide-content .slicer-slide-title {
    font-size: 35px;
    font-weight: 800;
  }
}
@media only screen and (min-width: 992px) {
  .slicer-slide-content .slicer-slide-title {
    font-size: 60px;
  }
}

.portfolio-slicer-slide-area .swiper-slide-active .slicer-slide-content {
  opacity: 1;
  visibility: visible;
}

.swiper-slicer .swiper-slide,
.swiper-slicer swiper-slide {
  overflow: hidden;
}

.swiper-slicer-image,
.swiper-slicer-image-clone,
.swiper-slicer-image-clones {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.swiper-slicer-image .swiper-slicer .swiper-slide,
.swiper-slicer-image-clone .swiper-slicer .swiper-slide,
.swiper-slicer-image-clones .swiper-slicer .swiper-slide {
  overflow: hidden;
}
.swiper-slicer-image .swiper-slicer swiper-slide,
.swiper-slicer-image-clone .swiper-slicer swiper-slide,
.swiper-slicer-image-clones .swiper-slicer swiper-slide {
  overflow: hidden;
}
.swiper-slicer-image .swiper-slicer-image,
.swiper-slicer-image-clone .swiper-slicer-image,
.swiper-slicer-image-clones .swiper-slicer-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  object-fit: cover;
  object-position: center;
}
.swiper-slicer-image .swiper-slicer-image-clone,
.swiper-slicer-image-clone .swiper-slicer-image-clone,
.swiper-slicer-image-clones .swiper-slicer-image-clone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  transition-timing-function: cubic-bezier(1, 0, 0.5, 1);
}
.swiper-slicer-image .swiper-slicer-image-clone .swiper-slicer-image,
.swiper-slicer-image-clone .swiper-slicer-image-clone .swiper-slicer-image,
.swiper-slicer-image-clones .swiper-slicer-image-clone .swiper-slicer-image {
  display: block;
}
.swiper-slicer-image .swiper-slicer-image-clones,
.swiper-slicer-image-clone .swiper-slicer-image-clones,
.swiper-slicer-image-clones .swiper-slicer-image-clones {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.swiper-slicer-image {
  display: none;
  object-fit: cover;
  object-position: center;
}

.swiper-slicer-image-clone {
  overflow: hidden;
  transition-timing-function: cubic-bezier(1, 0, 0.5, 1);
}

.swiper-slicer-image-clone .swiper-slicer-image {
  display: block;
}

.header-area.slicer-slide-header {
  border: 0;
}

/*# sourceMappingURL=main.css.map */



/* new styles */

.banner-title{
  position: relative;
}


.banner-brain {
      
      overflow: hidden;
      filter: url(#smudgeFilter);
      cursor: pointer;
      position: relative;
    }

    .banner-brain img {
      display: flex;
      margin: auto;
      width: 95%;
      display: block;
      user-select: none;
      pointer-events: none;
    }


/* 
.banner-area::after{
  content: "";
  display: block;
  height: 65vh;  
}
.banner-video-shape {
  position: absolute;
  top: 27%;
  left: 17%;
  z-index: 10;
}

.video-shape-container {
  height: 90px;
  width: 250px;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  transform-origin: center center;
  transition: all 0.5s ease;
}

.zoom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}
.banner-video-shape,
.video-shape-container,
.zoom-video {
  will-change: transform, opacity;
  backface-visibility: hidden;
} */
.brand-area img{
  width: 100%;
  height: 150px;
  object-fit: contain;
  padding: 20px;
}

/* .video-final-section {
  position: relative;
  height: 100vh;
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f9f9f9;
} */

.service-title-top{
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.service-title-top h1{
  text-align: center;
  color: #fff;
  width: 100%;
}
.home-service .featured-img{
  height: 500px;
  width: 100%;
}
.home-service .featured-img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-four-feature-area {
    background-color: #000;
    background-image: url('../imgs/bg/experties-bg.png');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

.home-four-feature-area::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: #000;
  opacity: 0.5;
}
.home-about .agency-content-wrapper p{
  
  font-size: 17px;
  line-height: 25px;
}

.visual-insights .feature-item img{
  border-radius: 20px;
  height: 450px;
  width: 100%;
  object-fit: cover;
}

.banner-area .banner-left-wrapper h6{
  font-size: 60px;
  color: var(--bd-secondary);
  margin-bottom: 20px;
}
.banner-area .banner-left-wrapper p{
  font-size: 20px;
}
@keyframes zoomInOutTwice {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.zoom-twice {
  animation: zoomInOutTwice 2s ease-in-out;
}

.new-subtitle{
  display: flex;
  margin: auto;
  margin-bottom: 50px;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  padding: 10px;
  background-color: rgb(0, 134, 0);
  border-radius: 10px;
  width: fit-content;
}
.banner-title span {
        display: inline-block;
    }

.home-why-us-content .first{
  background-color: rgb(220, 255, 220);
}
.home-why-us-content .second{
  background-color: rgb(255, 220, 220);
}
.home-why-us-content .three{
  background-color: rgb(240, 220, 255);
}
.home-why-us-content .four{
  background-color: rgb(220, 245, 255);
}
.home-why-us-content .five{
  background-color: rgb(255, 246, 220);
}
.home-why-us-content .six{
  background-color: rgb(255, 220, 247);
}




.home-service-section .first{
  background-color: rgb(220, 255, 220);
}
.home-service-section .second{
  background-color: rgb(255, 220, 220);
}
.home-service-section .three{
  background-color: rgb(240, 220, 255);
}
.home-service-section .four{
  background-color: rgb(220, 245, 255);
}

.about-page-about-section .page-title-text p{
  line-height: 30px;
}
.about-page-about-section .page-title-text span{
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  background-color: var(--bd-primary);
}
.blog-single-area .identity-reveal-img{
  background-position: center;
}

.service-page-new img{
  height: 400px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.about-page-about-section{
  margin-bottom: 100px;
}

.service-page-step-process .workflow-single-inner{
  padding: 12px;
  border-radius: 20px;
  height: 250px;
}
.service-page-step-process .workflow-single-inner h4{
  font-size: 22px;
}
.service-page-step-process .workflow-single-inner p{
  font-size: 16px;
}
.service-page-step-process .one {
    background-color: rgb(220, 255, 220);
}
.service-page-step-process .two {
    background-color: rgb(255, 220, 220);
}
.service-page-step-process .three {
    background-color: rgb(240, 220, 255);
}
.service-page-step-process .four {
    background-color: rgb(220, 245, 255);
}
.service-page-step-process .five{
    background-color: rgb(255, 246, 220);
}
.service-page-step-process .six{
    background-color: rgb(227, 227, 227);
}




.ai-technology-section .agency-img-wrapper{
  width: 100%;
}
.ai-technology-section .agency-single-img{
  width: 100%;
}
.ai-technology-section img{
  height: 550px;
  width: 100%;
  object-fit: cover;
}

.blog-more-image img{
  height: 400px;
  width: 100%;
  object-fit: cover;
}


.float{
	position:fixed;
	width:50px;
	height:50px;
	bottom:30px;
	left:20px;
	background-color:var(--bd-primary);
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:20px;
	box-shadow: 2px 2px 3px #520000;
  z-index:100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-float{
  margin: auto;
}

.float:hover{
  transform: scale(1.1);
  color: #fff;
}
.pricing-circle{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: var(--bd-primary);
  display: flex;
  justify-content: center;
  margin: auto;
}
.pricing-circle .pricing-price{
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-align: center;
  font-size: 25px;
  height: 100%;
}
.pricing-circle .pricing-price span{
  font-size: 80px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0px;
}

.pricing-area .pricing-list{
  background-color: #008600;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 0px;
}
.pricing-area .pricing-list li{
  color: #Fff;
  font-size: 20px;
}
.pricing-area .pricing-btn{
  margin-top: 50px;
}

.pricing-area .identity-reveal-img{
  height: 100%;
}

.pricing-area .pricing-list {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 20px;
  z-index: 1;
  background-color: #008600;
}

.pricing-area .bg-wipe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  transform: translateX(-100%);
  z-index: -1;
  border-radius: 20px;
}


/* Responsive Styles */

@media only screen and (max-width: 800px){
  .bars_icon .line{
    background-color: #fff;
  }
  .banner-title{
    font-size: 45px;
  }
  .banner-area .banner-left-wrapper h6{
    font-size: 35px;
  }
  .banner-area .banner-left-wrapper p{
    font-size: 16px;
  }
  .banner-area{
    padding-top: 100px;
  }
  .banner-left-wrapper img{
    width: 100%;
  }
  .banner-thumb-2  img{
    width: 100% !important;
    height: 100% !important;
  }
  @keyframes slide-left-2 {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(50px);
    transform: translateX(20px);
  }
  }
  .trusted-left-content h3{
    font-size: 23px;
  }
  .creative-single p{
    font-size: 15px;
  }
  .brand-area img{
    height: 100px;
  }
  .new-subtitle{
    font-size: 20px;
  }
  .section-title{
    font-size: 23px;
  }
  p{
    font-size: 15px !important;
  }
  .section-space{
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .agency-content-wrapper p{
    font-size: 15px !important;
  }
  .large-counter-text{
    font-size: 35px !important;
  }
  .home-two-brand{
    margin-bottom: 30px;
  }
  .new-subtitle{
    margin-bottom: 30px;
  }
  .section-text-five p{
    font-size: 15px !important;
  }
  .service-box-left-content .section-text-five{
    max-width: 100% ;
  }
  .service-box{
    gap: 20px 0px;
  }
  .service-box-right-content .service-image-new img{
    height: 200px;
  }
  .visual-insights .feature-item img{
    height: 250px;
  }
  .testimonial-single-card .testimonial-content p{
    font-size: 16px !important;
  }
  .footer-logo img{
    margin-bottom: 0px !important; 
  }
  .pin-spacer{
    margin-top: 50px !important;
  }
  .offcanvas-logo{
    width: 180px;
    background: #fff;
  }
  .about-page-about-section{
    padding: 100px 0px 50px 0px !important;
    margin-bottom: 0px !important;
  }
  .page-title .title-img{
    height: 35px !important;
  }
  .about-page-about-section .page-title-text span{
    font-size: 18px;
    padding: 5px 10px;
  }
  .page-title-bottom{
    padding-top: 0px;
  }
  .single-counter p{
    font-size: 14px !important;
  }
  .contact-top-area{
    padding-top: 100px !important;
  }
  .contact-top-area.page-title-area .arrow-down-right img{
    width: 60px;
  }
  .service-page-step-process .workflow-single-inner{
    height: 100%;
    padding: 20px 10px;
  }
  .service-page-new img{
    height: 300px;
  }
  .pricing-area .pricing-list{
    padding: 15px;
  }
  .pricing-area{
    margin-top: 20px;
  }
  .pricing-single-inner{
    padding: 10px;
  }
  .ai-technology-section img{
    height: 300px;
  }
  .ai-technology-section .agency-single-img-two{
    margin-top: 0px;
  }
  .technology-branc-section .col-lg-2{
    width: 50%;
  }
  .insights-page-section .identity-reveal-img{
    height: 400px;
  }
  .blog-details-area {
    padding-top: 100px !important;
  }
  .blog-details-bg-img{
    margin-bottom: 0px;
  }
  .blog-details-bg-img img{
    height: 250px;
  }
}