@charset "UTF-8";
/*-----------------------------------------------------------------------------------

  Trexa – AI Agency & Technology Figma Template
  Author: themewolfs 
  Description: Trexa Ai agency is a cutting-edge Figma template built for AI-driven businesses and technology companies. With its clean, modern design, it’s ideal for AI agencies, tech consultants, data science specialists, machine learning startups, AI developers, and any organization working in the world of artificial intelligence and advanced technologies.
  Developer: Masirul Islam & Rana Ahmed
  Design Source: https://themeforest.net/user/themewolfs
  Version: 1.0

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

/************ TABLE OF CONTENTS ***************
/* variable css */
/* typography css */
/* animation css */
/* common css */
/* theme css */
/* preloader css */
/* scroll css */
/* button css */
/* menu css */
/* modal css */
/* cursor css */
/* header css */
/* footer css */
/* digital agency page css */
/* startup agency page css */
/* creative agency page css */
/* design studio page css */
/* branding agency page css */
/* video production page css */
/* portfolio minimal page css */
/* Portfolio Grid page css */
/* full screen menu slider page css */
/* ai agency page css */
/* about us page css */
/* service page css */
/* service details page css */
/* work page css */
/* work details page css */
/* team page css */
/* team details page css */
/* blog page css */
/* blog details page css */
/* contact page css */
/* error page css */
/* marketing agency page css */
/* modern agency page css */
/* image reveal hover page css */
/* agency portfolio page css */
/* agency portfolio 2 page css */
/* portfolio massonary page css */
/* portfolio full page css */
/* full screen clam slider page css */
/* === Colors variable scss (index 01) === */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Thunder:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Monoton&display=swap" rel="stylesheet1');

/* Top Header Styles */
.top-header {
  background-color: #f0f2f4;
  /* Match Hero Background */
  color: #1a1a1a;
  /* Dark text */
  padding: 16px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  /* border-bottom: 1px solid #e5e5e5; REMOVED to blend background */
  position: relative;
  z-index: 100;
}

.top-header .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
}

.top-header-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
  /* Dark text */
  text-decoration: none;
  transition: color 0.3s ease;
}

.top-header-item:hover {
  color: var(--primary);
}

.top-header-item i {
  color: var(--primary);
  font-size: 16px;
}

/* Specific WhatsApp Icon Color override if desired, or keep uniform */
.top-header-item .fa-whatsapp {
  color: #25D366;
}

:root {
  --primary: #101010;
  --secondary: #555555;
  --black: #000000;
  --red: #f14f44;
  --green: #41f681;
  --lime-green: #90ee02;
  --orange: #FF5914;
  --yellow: #f3ff0a;
  --purple: #5814f9;
  --white: #ffffff;
  --gray: #999;
  --gray-two: #555555;
  --gray-three: #F0F2F4;
  --border-color-one: rgba(255, 255, 255, 0.1);
  --border-color-two: #DADADA;
}

/* === Responsive variable scss (index 02) === */
/* === For Box Layout scss (index 03) === */
/* === Responsive container scss (index 04) === */
/* === heading scss (index 01) === */
/* === dark scss (index 01) === */
/* === bg primary  scss (index 01) === */
/* === Transition multiple scss (index 01) === */
/* === Transform scss (index 01) === */
/* === Flexbox scss (index 01) === */
/* === Font Family scss (index 01) === */
/* === Tartuffo Trial scss (index 02) === */
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-BoldLC.ttf");
  font-weight: 700;
}

:root {
  --font_kanit: "Kanit", sans-serif;
  --font_instr: "Instrument Sans";
  --font_mono: "Monoton";
  --font_thunder: "Thunder";
  --font_awesome: "Font Awesome 6 Pro";
}

/* === Defalut Style scss (index 03) === */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font_kanit);
  line-height: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.48px;
  color: var(--secondary);
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  color: var(--primary);
  line-height: 1.22;
  font-family: var(--font_instr);
  font-weight: 500;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

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

a:hover {
  color: var(--primary);
}

button {
  background-color: transparent;
  border: 0;
}

p {
  padding: 0;
  margin: 0;
}

strong {
  font-weight: 500;
}

video,
iframe,
img {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

.medium {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

/* === Gutter scss (index 03) === */
@media only screen and (max-width: 767px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }

  .row.g-0 {
    padding-right: 0;
    padding-left: 0;
  }

  br {
    display: none;
  }
}

main {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

.container {
  padding: 0 15px;
}

@media (min-width: 1800px) {
  .container {
    max-width: 1800px;
    margin: 0 auto;
  }
}

.container-1600 {
  padding: 0 15px;
}

@media (min-width: 1800px) {
  .container-1600 {
    max-width: 1630px;
    margin: 0 auto;
  }
}

/* animation css */
.t_parallax_image {
  overflow: hidden;
}

.rotate-spin {
  display: inline-block;
  animation: spin 7s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* === Scrollbar scss (index 01) === */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #d6d6d6;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === positioning scss (index 02) === */
.rr-pos-rel {
  position: relative;
}

.rr-pos-abs {
  position: absolute;
}

.rr-ov-hidden {
  overflow: hidden;
}

/* === Container scss (index) === */
.rr-container-1800 {
  max-width: 1800px;
}

.rr-container-1350 {
  max-width: 1350px;
}

.rr-container-1600 {
  max-width: 1650px;
}

/* === Background scss (index 04) === */
.rr-bg-primary {
  background-color: var(--primary);
}

/* === Parallax view scss (index 05) === */
.parallax-view {
  overflow: hidden;
}

.go-down {
  width: 28px;
  height: 28px;
  background-color: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
}

.dark .go-down {
  color: var(--black);
}

/* === Section title scss (index 06) === */
.section-title {
  font-size: 90px;
  /* Specific font family and weight */
}

@media only screen and (max-width: 1919px) {
  .section-title {
    font-size: 70px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-title {
    font-size: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .section-title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .section-title {
    font-size: 35px;
  }
}

.section-title.font-bdogrotesk-regular {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.section-title.font-bdogrotesk-regular-50 {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}

@media (min-width: 1200px) {
  .section-title.font-bdogrotesk-regular-50 {
    font-size: 50px;
  }
}

.section-title.font-astronebula-light {
  font-family: var(--font_astronebula);
  font-weight: 300;
  line-height: 0.83;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 1199px) {
  .section-title.font-astronebula-light {
    line-height: 0.93;
  }
}

/* === Section title scss (sofware 04) === */
.section-top4 {
  margin-bottom: 50px;
}

.section-top4__subtitle {
  position: relative;
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  text-transform: uppercase;
  padding: 8px 0;
  display: inline-block;
  margin-bottom: 20px;
}

.section-top4__subtitle::before {
  content: "";
  position: absolute;
  background: #000;
  width: 100%;
  height: 1px;
  padding-left: 1px 122px;
  top: 80%;
  left: 0%;
}

.section-top4__subtitle::after {
  content: "";
  position: absolute;
  background: #000;
  width: 100%;
  height: 1px;
  padding-left: 1px 122px;
  bottom: 10%;
  left: 0%;
}

.section-top4__title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .section-top4__title {
    font-size: 37px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .section-top4__title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .section-top4__title {
    line-height: 1.2;
    font-size: 28px;
  }
}

.section-top4__text {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  max-width: 610px;
}

/* === Section title scss (seo-agency 06) === */
.section-top6 {
  margin-bottom: 50px;
}

@media only screen and (max-width: 1199px) {
  .section-top6 {
    margin-bottom: 20px;
  }
}

.section-top6__subtitle {
  position: relative;
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .section-top6__subtitle {
    margin-bottom: 14px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-top6__subtitle {
    margin-bottom: 14px;
  }
}

.section-top6__title {
  color: #000;
  text-align: center;
  justify-content: center;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-top6__title {
    font-size: 44px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-top6__title {
    font-size: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-top6__title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .section-top6__title {
    font-size: 18px;
  }
}

.section-top6__text {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  max-width: 610px;
}

.section-top7 {
  margin-bottom: 50px;
}

.section-top7__subtitle {
  position: relative;
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  text-transform: uppercase;
  padding: 8px 25px;
  display: inline-block;
  margin-bottom: 20px;
}

.section-top7__subtitle::before {
  content: "";
  position: absolute;
  background: #000;
  width: 10px;
  height: 10px;
  top: 15px;
  left: 0;
  border-radius: 1px;
  opacity: 1;
}

.section-top7__title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .section-top7__title {
    font-size: 37px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-top7__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .section-top7__title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .section-top7__title {
    line-height: 1.2;
    font-size: 28px;
  }
}

.section-top7__text {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  max-width: 610px;
}

/* === Section spacing  scss (index 07) === */
.section-spacing {
  padding-bottom: 120px;
  padding-top: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

/* === ontainer styling with full HD support  scss (index 08) === */
.container {
  --bs-gutter-x: 30px;
}

@media (min-width: 1600px) {
  .container.full-hd {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===Inverted scss (index 09) === */
.text-invert>div {
  background-image: linear-gradient(to right, var(--primary) 50%, #cdc9c6 51%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* ===Side info and offcanvas scss (index 10) === */
.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 900;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.offcanvas-overlay.overlay-open {
  opacity: 0.5;
  visibility: visible;
}

.side-info-close {
  font-size: 20px;
  padding: 0;
  transition: all 0.3s linear;
  background-color: transparent;
  color: var(--black);
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  line-height: 38px;
}

.dark .side-info-close {
  border-color: var(--white);
  color: var(--white);
}

.side-info-close:hover {
  transform: rotate(90deg);
}

.side-info {
  background: var(--white) none repeat scroll 0 0;
  padding: 40px 45px;
  position: fixed;
  right: 0;
  top: 0;
  width: 500px;
  height: 100%;
  transform: translateX(calc(100% + 80px));
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 9999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.dark .side-info {
  background-color: #1f1f1f;
}

@media only screen and (max-width: 1199px) {
  .side-info {
    width: 460px;
  }
}

@media (max-width: 575px) {
  .side-info {
    width: 280px;
    padding: 30px 20px;
  }
}

.side-info ::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}

.side-info.info-open {
  opacity: 1;
  transform: translateX(0);
  /* Show side info */
}

/* === Offset header scss (index 11) === */
.offset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offset-logo {
  width: 95px;
}

@media (max-width: 575px) {
  .offset-logo {
    width: 95px;
  }
}

.offset-logo img {
  width: 100%;
}

.offset-button {
  margin-top: 40px;
}

@media (min-width: 576px) {
  .offset-button {
    display: none;
  }
}

/* === Offset widget box scss (index 12) === */
.offset-widget-box {
  margin-top: 40px;
}

.offset-widget-box .title {
  font-size: 24px;
  line-height: 1.33;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .offset-widget-box .title {
    margin-bottom: 22px;
  }
}

.offset-widget-box .contact-meta>*:not(:first-child) {
  margin-top: 16px;
}

.offset-widget-box .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.offset-widget-box .contact-item span {
  color: var(--primary);
  font-weight: 500;
}

.offset-widget-box .contact-item span a:hover {
  color: var(--secondary);
}

.offset-widget-box .contact-item .icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  border: 1px solid var(--border);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--primary);
}

/* ===Mobile menu customization scss (index 13) === */
.mobile-menu {
  margin-top: 40px;
}

.mobile-menu.mean-container .mean-nav>ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mobile-menu.mean-container .mean-nav>ul>li:last-child>a {
  border-bottom: 1px solid var(--border);
}

.mobile-menu.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mobile-menu.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: #999999;
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}

.mobile-menu.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 0px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  text-transform: capitalize;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}

.mobile-menu.mean-container .mean-nav ul li a:hover {
  color: var(--primary);
}

.mobile-menu.mean-container .mean-nav ul li a.mean-expand {
  width: 100%;
  height: 48px;
  justify-content: end;
  font-weight: 300;
  border: none !important;
  background-color: transparent;
}

@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}

.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.mobile-menu.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--border);
}

.mobile-menu.mean-container .mean-nav ul li li a {
  font-size: 16px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 15px;
}

.mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}

@media only screen and (max-width: 991px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}

.mobile-menu.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--border);
}

.mobile-menu.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}

.mobile-menu.mean-container .mean-bar {
  padding-bottom: 30px;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}

.mobile-menu.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}

.mobile-menu.mean-container a.meanmenu-reveal {
  display: none !important;
}

/* === Sticky header scss (index 14) === */
.header-sticky {
  transition: all 0.5s;
}

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

.transformed .header-area__inner {
  height: 80px;
}

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

/* === inverted text scss (index 15) === */
.text-invert>div {
  background-image: linear-gradient(to right, var(--primary) 50%, rgba(17, 17, 17, 0.3) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.background-image {
  background-position: center;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.border-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.section-spacing {
  padding-bottom: 130px;
  padding-top: 130px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

.section-spacing-120 {
  padding-bottom: 120px;
  padding-top: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-120 {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-120 {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-120 {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

.section-spacing-top-120 {
  padding-top: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-top-120 {
    padding-top: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-top-120 {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-top-120 {
    padding-top: 60px;
  }
}

.section-spacing-top {
  padding-top: 130px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-top {
    padding-top: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-top {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-top {
    padding-top: 60px;
  }
}

.section-spacing-bottom {
  padding-bottom: 130px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-bottom {
    padding-bottom: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-bottom {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-bottom {
    padding-bottom: 60px;
  }
}

.background-image {
  background-position: center;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.border-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.section-bg {
  background-color: #f0f2f4;
}

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

@media only screen and (max-width: 1399px) {
  .ml-107 {
    margin-left: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .ml-107 {
    margin-left: 0px;
  }
}

.inner-page__title {
  font-family: var(--font_thunder);
  font-weight: 700;
  font-size: 420px;
  line-height: 400px;
  letter-spacing: 0%;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  padding-bottom: 40px;
}

@media only screen and (max-width: 1919px) {
  .inner-page__title {
    font-size: 320px;
    line-height: 1;
  }
}

@media only screen and (max-width: 1399px) {
  .inner-page__title {
    font-size: 300px;
  }
}

@media only screen and (max-width: 1199px) {
  .inner-page__title {
    font-size: 200px;
  }
}

@media only screen and (max-width: 991px) {
  .inner-page__title {
    font-size: 180px;
  }
}

@media only screen and (max-width: 767px) {
  .inner-page__title {
    font-size: 150px;
  }
}

@media (max-width: 575px) {
  .inner-page__title {
    font-size: 70px;
  }
}

.rr-bg-gray {
  background: var(--gray-three);
}

.nice-select:after {
  display: none !important;
}

/* Nice-select dropdown list styling */
.nice-select .list {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 450px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999;
}

.nice-select .list .option {
  color: #000000 !important;
  background-color: #ffffff;
  padding: 10px 15px;
  font-size: 14px;
  white-space: nowrap;
}

.nice-select .list .option:hover,
.nice-select .list .option.focus,
.nice-select .list .option.selected.focus {
  background-color: #f0f0f0;
  color: #000000 !important;
}

/* === theme scss (index 01) === */
html {
  --container-max-widths: 1320px;
}

@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px;
  }
}

@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px;
  }
}

@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px;
  }
}

@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px;
  }
}

.body-wrapper {
  background-color: var(--white);
}

.body-wrapper.dark {
  background-color: var(--black);
}

.img_anim_reveal {
  visibility: hidden;
  overflow: hidden;
}

.img_anim_reveal img {
  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: left;
}

.anim-reveal {
  overflow: hidden;
}

.anim-reveal-line {
  overflow: hidden;
}

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

.color-black {
  color: var(--black);
}

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

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

/* === BG Color scss (index 02) === */
.theme-bg-white {
  background-color: var(--white);
}

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

.dark .theme-bg-black {
  background-color: #171717;
}

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

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

.theme-bg-transparent {
  background-color: transparent;
}

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

/* === Z-index scss (index 03) === */
.zi-1 {
  z-index: 1;
}

.zi-2 {
  z-index: 2;
}

.zi-0 {
  z-index: 0;
}

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

/* === Text Border scss (index 04) === */
.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.vertically-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Text Indent scss (index 05) === */
.text-indent-40 {
  text-indent: 40px;
}

.text-indent-50 {
  text-indent: 50px;
}

header {
  margin-bottom: -1px;
  z-index: 100;
}

section {
  margin-bottom: -1px;
}

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

.dir-rtl {
  direction: rtl;
}

.show-light {
  display: inline-block;
}

.dark .show-light {
  display: none;
}

.show-dark {
  display: none;
}

.dark .show-dark {
  display: inline-block;
}

.line-divider-sm {
  height: 0.5px;
  background-color: var(--black-9);
}

/* === preloader scss (index 02) === */
.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: var(--action);
  z-index: 99999999999999;
}

.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 110vh;
  fill: #000;
}

.loader-wrap .loader-wrap-heading .load-text {
  font-size: 100px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  z-index: 20;
}

@media only screen and (max-width: 767px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 50px;
  }
}

.load-text span {
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
  animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
  animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes loading {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* === Animated Logo Styles === */
.animated-logo-header,
.animated-logo-footer {
  display: inline-flex;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.animated-logo-header {
  font-size: 40px;
  line-height: 40px;
}

.animated-logo-footer {
  font-size: 80px;
  line-height: 114px;
}

@media only screen and (max-width: 767px) {
  .animated-logo-header {
    font-size: 30px;
    line-height: 30px;
  }

  .animated-logo-footer {
    font-size: 50px;
    line-height: 70px;
  }
}

.animated-logo-header span {
  animation: logoFadeIn 2s infinite;
  display: inline-block;
}

.animated-logo-footer span {
  animation: logoFadeIn 2s infinite;
  display: inline-block;
  color: #ffffff;
}

/* Gradient effect for header logo */
.animated-logo-header span:nth-child(1) {
  color: #000000;
  animation-delay: 0s;
}

.animated-logo-header span:nth-child(2) {
  color: #2d2d2d;
  animation-delay: 0.1s;
}

.animated-logo-header span:nth-child(3) {
  color: #8b3a3a;
  animation-delay: 0.2s;
}

.animated-logo-header span:nth-child(4) {
  color: #d94545;
  animation-delay: 0.3s;
}

.animated-logo-header span:nth-child(5) {
  color: #ff6347;
  animation-delay: 0.4s;
}

/* White for footer logo with staggered delays */
.animated-logo-footer span:nth-child(1) {
  animation-delay: 0s;
}

.animated-logo-footer span:nth-child(2) {
  animation-delay: 0.1s;
}

.animated-logo-footer span:nth-child(3) {
  animation-delay: 0.2s;
}

.animated-logo-footer span:nth-child(4) {
  animation-delay: 0.3s;
}

.animated-logo-footer span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes logoFadeIn {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

/* === scroll scss (index 01) === */
.scroll__down {
  display: flex;
  gap: 20px;
  align-items: center;
}

.scroll__down p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--white);
}

.scroll__down span {
  width: 66px;
  height: 106px;
  border: 1px solid var(--black-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 89px;
}

.scroll__down span i {
  color: var(--white);
}

.scroll__down-wrapper {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 1399px) {
  .scroll__down-wrapper {
    height: 380px;
  }
}

@media only screen and (max-width: 1199px) {
  .scroll__down-wrapper {
    height: 350px;
  }
}

@media only screen and (max-width: 767px) {
  .scroll__down-wrapper {
    height: auto;
    padding: 40px 0;
  }
}

.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 0px;
  z-index: 9999;
  background: var(--white);
  border-radius: 100px;
  mix-blend-mode: exclusion;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.scroll-top.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

.go-top-writer {
  width: 105px;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  background-image: url(../imgs/writer/go-top.webp);
  background-position: right center;
  background-repeat: no-repeat;
  right: 16%;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 0.5s;
}

.go-top-writer:hover {
  color: var(--primary);
}

.go-top-writer.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .go-top-writer br {
    display: block;
  }
}

/* === progress-wrap scss (index 01) === */
.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100px);
  transition: all 300ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  mix-blend-mode: exclusion;
  background-color: var(--black);
}

.progress-wrap::after {
  position: absolute;
  content: "\f062";
  font: var(--fa-font-solid);
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: var(--primary);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
  border-radius: 50px;
}

.dark .progress-wrap::after {
  color: var(--black);
}

.progress-wrap svg path {
  fill: var(--black-6);
}

.progress-wrap svg.progress-circle path {
  fill: var(--white);
  stroke: transparent;
  stroke-width: 5;
  box-sizing: border-box;
  transition: all 200ms linear;
}

/* === primary btn scss (index 01) === */
.rr-btn-green {
  z-index: 5;
  font-size: 18px;
  overflow: hidden;
  font-weight: 500;
  line-height: 28px;
  position: relative;
  padding: 18px 31px;
  align-items: center;
  display: inline-flex;
  border-radius: 500px;
  letter-spacing: -0.48px;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--font_bai);
  background-color: var(--lime-green);
}

.rr-btn-green:hover::before,
.rr-btn-green:focus::before {
  height: 100%;
}

.rr-btn-green:hover .btn-wrap .text-one,
.rr-btn-green:focus .btn-wrap .text-one {
  transform: translateY(-150%);
}

.rr-btn-green:hover .btn-wrap .text-two,
.rr-btn-green:focus .btn-wrap .text-two {
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
}

.rr-btn-green:after {
  display: block;
  clear: both;
  content: "";
}

.rr-btn-green::before {
  background-color: var(--red);
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.5s;
}

.rr-btn-green .btn-wrap {
  z-index: 1;
  float: left;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border: none;
}

.rr-btn-green .btn-wrap .text-one,
.rr-btn-green .btn-wrap .text-two {
  gap: 6px;
  display: flex;
  align-items: center;
}

.rr-btn-green .btn-wrap .text-one {
  position: relative;
  color: var(--primary);
  transition: all 0.5s;
}

.rr-btn-green .btn-wrap .text-two {
  top: 100%;
  position: absolute;
  color: var(--white);
  transition: all 0.5s;
}

.rr-btn-green.green-2 {
  font-size: 16px;
  line-height: 20px;
  padding: 12px 28px;
  border-radius: 2px;
  background: var(--green);
}

.rr-btn-green.btn-purple::before {
  background: #b4f914;
}

.rr-btn-green.btn-purple .text-one {
  color: var(--white);
}

.rr-btn-green.btn-purple:hover {
  background-color: transparent;
}

.rr-btn-green.btn-purple:hover .text-two {
  color: var(--primary);
}

.rr-btn-green.btn-black {
  background-color: var(--primary);
}

.rr-btn-green.btn-black::before {
  background: #b4f914;
  z-index: -1;
}

.rr-btn-green.btn-black .text-one {
  color: var(--white);
}

.rr-btn-green.btn-black:hover {
  background-color: transparent;
  color: var(--primary);
}

.rr-btn-green.btn-black:hover .text-two {
  color: var(--primary);
}

.rr-btn-green.btn-blue {
  background-color: var(--purple);
}

.rr-btn-green.btn-blue::before {
  background: var(--purple);
}

.rr-btn-green.btn-blue .text-one {
  color: var(--white);
}

.rr-btn-green.btn-blue:hover {
  background-color: transparent;
}

.rr-btn-green.btn-blue:hover .text-two {
  color: var(--primary);
}

.rr-btn-2 {
  z-index: 5;
  font-size: 16px;
  overflow: hidden;
  font-weight: 500;
  line-height: 162.5%;
  position: relative;
  padding: 14px 44px;
  align-items: center;
  display: inline-flex;
  border-radius: 90px;
  letter-spacing: -0.48px;
  justify-content: center;
  text-transform: uppercase;
  font-family: Kanit;
  background: #febc00;
}

.rr-btn-2:hover::before,
.rr-btn-2:focus::before {
  height: 100%;
}

.rr-btn-2:hover .btn-wrap .text-one,
.rr-btn-2:focus .btn-wrap .text-one {
  transform: translateY(-150%);
}

.rr-btn-2:hover .btn-wrap .text-two,
.rr-btn-2:focus .btn-wrap .text-two {
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%;
}

.rr-btn-2:after {
  display: block;
  clear: both;
  content: "";
}

.rr-btn-2::before {
  background-color: var(--red);
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.5s;
}

.rr-btn-2 .btn-wrap {
  z-index: 1;
  float: left;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border: none;
}

.rr-btn-2 .btn-wrap .text-one,
.rr-btn-2 .btn-wrap .text-two {
  gap: 6px;
  display: flex;
  align-items: center;
}

.rr-btn-2 .btn-wrap .text-one {
  position: relative;
  color: var(--primary);
  transition: all 0.5s;
}

.rr-btn-2 .btn-wrap .text-two {
  top: 100%;
  position: absolute;
  color: var(--white);
  transition: all 0.5s;
}

.rr-btn-2.green-2 {
  font-size: 16px;
  line-height: 20px;
  padding: 12px 28px;
  border-radius: 2px;
  background: var(--green);
}

.rr-btn-2.btn-purple::before {
  background: #febc00;
}

.rr-btn-2.btn-purple .text-one {
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%;
}

.rr-btn-2.btn-purple:hover {
  background-color: transparent;
}

.rr-btn-2.btn-purple:hover .text-two {
  color: var(--primary);
}

.rr-btn-2.btn-black {
  background-color: var(--primary);
}

.rr-btn-2.btn-black::before {
  background: #febc00;
}

.rr-btn-2.btn-black .text-one {
  color: var(--white);
}

.rr-btn-2.btn-black:hover {
  background-color: transparent;
}

.rr-btn-2.btn-black:hover .text-two {
  color: var(--primary);
}

.rr-btn-border {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: var(--primary);
  border-radius: 500px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #e3e3e3;
  font-family: var(--font_kanit);
  justify-content: space-between;
  background: rgba(241, 241, 241, 0);
}

.rr-btn-border .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: var(--white);
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-border:hover .icon {
  rotate: -45deg;
}

.rr-btn-border.btn-black {
  color: var(--white);
  background: var(--primary);
}

.rr-btn-border.btn-black .icon {
  color: var(--primary);
  background: var(--white);
}

.rr-btn-border.btn-purple {
  gap: 30px;
  color: var(--white);
  background: var(--purple);
  padding: 10px 11px 10px 37px;
}

.rr-btn-border.btn-purple .icon {
  width: 44px;
  height: 44px;
  color: var(--primary);
  background: var(--white);
}

.btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 40px;
  background: var(--orange);
  color: var(--white);
  border: none;
  color: #fff;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  border-radius: 15px;
  cursor: pointer;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 40px;
  background: var(--black);
  color: var(--white);
  border: none;
  color: #fff;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  border-radius: 15px;
  cursor: pointer;
}

.rr-btn-button {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: #000;
  border-radius: 90px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #e3e3e3;
  font-family: Kanit;
  justify-content: space-between;
  background: rgba(241, 241, 241, 0);
}

.rr-btn-button .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: var(--white);
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-button:hover .icon {
  rotate: -45deg;
}

.rr-btn-button.btn-black {
  color: var(--white);
  background: var(--primary);
}

.rr-btn-button.btn-black .icon {
  color: var(--primary);
  background: var(--white);
}

.rr-btn-button.btn-purple {
  gap: 30px;
  color: #000;
  background: #febc00;
  padding: 10px 11px 10px 37px;
}

.rr-btn-button.btn-purple .icon {
  width: 44px;
  height: 44px;
  background: #000;
}

.rr-btn-button2 {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: #000;
  border-radius: 90px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #e3e3e3;
  font-family: Kanit;
  justify-content: space-between;
  background: rgba(241, 241, 241, 0);
}

.rr-btn-button2 .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: var(--white);
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-button2:hover .icon {
  rotate: -45deg;
}

.rr-btn-button2.btn-black {
  color: var(--white);
  background: var(--primary);
}

.rr-btn-button2.btn-black .icon {
  color: var(--primary);
  background: var(--white);
}

.rr-btn-button2.btn-purple {
  gap: 30px;
  color: var(--white);
  background: var(--red);
  padding: 10px 11px 10px 37px;
}

.rr-btn-button2.btn-purple .icon {
  width: 44px;
  height: 44px;
  background: #000;
}

.rr-btn-button3 {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: #000;
  border-radius: 90px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #e3e3e3;
  font-family: Kanit;
  justify-content: space-between;
  background: rgba(241, 241, 241, 0);
}

.rr-btn-button3 .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: #000;
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-button3:hover .icon {
  rotate: -45deg;
}

.rr-btn-button3.btn-black {
  color: var(--white);
  background: var(--primary);
}

.rr-btn-button3.btn-black .icon {
  color: var(--primary);
  background: var(--white);
}

.rr-btn-button3.btn-purple {
  gap: 30px;
  color: #fff;
  background: #000;
  padding: 10px 11px 10px 37px;
}

.rr-btn-button3.btn-purple .icon {
  width: 44px;
  height: 44px;
  background: #f3ff0a;
}

.rr-btn-button4 {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: #000;
  border-radius: 90px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #f80;
  font-family: Kanit;
  justify-content: space-between;
  background: rgba(241, 241, 241, 0);
}

.rr-btn-button4 .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: var(--white);
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-button4:hover .icon {
  rotate: -45deg;
}

.rr-btn-button4.btn-black {
  color: var(--white);
  background: var(--primary);
}

.rr-btn-button4.btn-black .icon {
  color: var(--primary);
  background: var(--white);
}

.rr-btn-button4.btn-purple {
  gap: 30px;
  color: #000;
  background: #febc00;
  padding: 10px 11px 10px 37px;
}

.rr-btn-button4.btn-purple .icon {
  width: 44px;
  height: 44px;
  background: #000;
}

.rr-btn-button4.btn-red {
  gap: 30px;
  color: #fff;
  background: var(--red);
  padding: 10px 11px 10px 37px;
}

.rr-btn-button4.btn-red .icon {
  width: 44px;
  height: 44px;
  background: #000;
}

.rr-btn-button5 {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  align-items: center;
  display: inline-flex;
  color: #000;
  border-radius: 90px;
  text-transform: uppercase;
  padding: 7px 8px 7px 24px;
  border: 1px solid #f80;
  font-family: var(--font_kanit);
  justify-content: space-between;
  background: var(--primary);
}

.rr-btn-button5 .icon {
  width: 36px;
  height: 36px;
  display: flex;
  font-size: 20px;
  color: var(--white);
  align-items: center;
  border-radius: 500px;
  transition: all 0.3s;
  background: var(--red);
  justify-content: center;
}

.rr-btn-button5 .icon svg path {
  stroke: #000;
}

.rr-btn-button5:hover .icon {
  rotate: -45deg;
}

.rr-btn-button5.btn-dark {
  gap: 30px;
  color: var(--white);
  background: var(--primary);
  padding: 10px 11px 10px 37px;
}

.rr-btn-button5.btn-dark .icon {
  width: 44px;
  height: 44px;
  background: #febc00;
}

/* === menu scss (index 01) === */
.main-menu.menu-dark>ul>li>a {
  color: var(--black);
}

.main-menu.menu-light>ul>li>a {
  color: var(--white);
}

.main-menu>ul {
  display: flex;
}

.main-menu>ul>li:first-child>a {
  padding-left: 0;
}

.main-menu>ul>li:last-child>a {
  padding-right: 0;
}

.main-menu>ul>li:hover>a {
  color: var(--secondary);
}

.main-menu>ul>li:hover>ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 0;
}

.main-menu>ul>li:hover>ul.dp-menu li:hover>ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 100%;
}

.main-menu li {
  position: relative;
  list-style: none;
}

.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  padding: 37px 15px;
  text-transform: capitalize;
}

.main-menu ul.dp-menu {
  background-color: #232529;
  padding: 18px 0px;
  width: 250px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}

.main-menu ul.dp-menu.column-2 {
  -moz-column-count: 2;
  column-count: 2;
  width: 480px;
  -moz-column-gap: 0;
  column-gap: 0;
}

.main-menu ul.dp-menu ul {
  background: var(--black);
  padding: 18px 0px;
  width: 300px;
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 0;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s;
}

.main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

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

.main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999999;
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.main-menu .has-mega-menu {
  position: static;
}

.main-menu li.menu-item-has-children>a:after {
  content: "\f0d7";
  font-family: var(--font_awesome);
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}

.main-menu .mega-menu {
  background-color: var(--black);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 50px;
  column-gap: 50px;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}

@media only screen and (max-width: 1399px) {
  .main-menu .mega-menu {
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
}

.main-menu .mega-menu li:has(ul)>a:after {
  content: "";
}

.main-menu .mega-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999999;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border-radius: 8px;
  overflow: hidden;
}

.main-menu .mega-menu li a:hover {
  color: var(--white);
  background: #2c2c2f;
}

.main-menu .mega-menu .title {
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  border-bottom: 1px solid #333337;
  padding-bottom: 20px;
  margin-bottom: 20px;
  pointer-events: none;
  border-radius: 0;
}

.main-menu .span-first-item ul li:first-child {
  grid-column: 1/-1;
  -moz-column-span: all;
  column-span: all;
}

/* === offcanvas scss (index 02) === */
.offcanvas__menu-wrapper.mean-container .mean-nav>ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav>ul>li:last-child>a {
  border-bottom: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.offcanvas__menu-wrapper.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 15px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 54px;
  height: 54px;
  justify-content: center;
  font-weight: 300;
  border: none !important;
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--secondary);
  opacity: 1;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 20px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 30px;
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}

@media only screen and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}

.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}

.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}

.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}

/* === cursor css scss (index 01) === */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
.cb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.3s, color 0.4s;
}

.cb-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 500px;
  transform: scale(0);
  transition: opacity 0.1s, transform 0.3s ease-in-out;
}

.cb-cursor-text {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: scale(0) rotate(10deg);
  transition: opacity 0.4s, transform 0.3s;
  color: white;
}

/* Exclusion and Blending Modes */
@supports (mix-blend-mode: exclusion) {

  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: exclusion;
  }

  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: white;
  }
}

.cb-cursor.-normal,
.cb-cursor.-text {
  mix-blend-mode: normal;
}

.cb-cursor.-normal:before,
.cb-cursor.-text:before {
  background: currentColor;
}

.cb-cursor.-inverse {
  color: white;
}

/* Cursor Visibility and Transformations */
.cb-cursor.-visible:before {
  transform: scale(0.2);
}

.cb-cursor.-visible.-active:before {
  transform: scale(0.23);
  transition-duration: 0.2s;
}

.cb-cursor.-pointer:before {
  transform: scale(0);
}

.cb-cursor.-text .cb-cursor-text {
  opacity: 1;
  transform: scale(1);
}

.cb-cursor.-text.-active:before {
  transform: scale(1.6);
  transition-duration: 0.2s;
}

.cb-cursor.all-element:before {
  transform: scale(1.6);
  opacity: 0.2;
  transition-duration: 0.2s;
}

.cb-cursor.-opaque:before {
  transform: scale(1.32);
}

.cb-cursor.-text:before {
  background: #000;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(2);
}

.cb-cursor.-opaque.-active:before {
  transform: scale(1.2);
}

.cb-cursor.-lg:before {
  transform: scale(2);
}

.cb-cursor.-hidden:before {
  transform: scale(0);
}

/*----------------------------------------*/
/*  Context-Specific Styles  */
/*----------------------------------------*/
@supports (mix-blend-mode: exclusion) {

  .body-startup-agency .cb-cursor.-exclusion,
  .body-startup-agency .cb-cursor {
    mix-blend-mode: exclusion;
    opacity: 1;
  }

  .body-startup-agency .cb-cursor.-exclusion:before,
  .body-startup-agency .cb-cursor:before {
    background: white;
    opacity: 1;
  }
}

.cb-cursor.-small {
  mix-blend-mode: normal;
  white-space: nowrap;
}

.cb-cursor.-small::before {
  background-color: #fff;
  width: 80px;
  height: 28px;
  top: -14px;
  left: -40px;
}

.cb-cursor.-small .cb-cursor-text {
  color: black;
}

.cb-cursor.-big {
  mix-blend-mode: normal;
  white-space: nowrap;
}

.cb-cursor.-big::before {
  background-color: #fff;
  width: 80px;
  height: 80px;
  top: -40px;
  left: -40px;
  mix-blend-mode: normal;
}

.cb-cursor.-big .cb-cursor-text {
  color: black;
}

.cb-cursor.portfolio:before {
  display: none;
}

.cb-cursor-text.portfolio {
  width: 420px;
  left: -210px;
}

@media only screen and (max-width: 1919px) {
  .cb-cursor-text.portfolio {
    width: 350px;
    left: -175px;
  }
}

@media only screen and (max-width: 1399px) {
  .cb-cursor-text.portfolio {
    width: 280px;
    left: -140px;
  }
}

.cb-cursor-text.portfolio .cb-cursor-text {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  display: block;
  text-align: start;
}

.cb-cursor-text.portfolio .hover-display {
  width: 420px;
}

@media only screen and (max-width: 1919px) {
  .cb-cursor-text.portfolio .hover-display {
    width: 350px;
  }
}

@media only screen and (max-width: 1399px) {
  .cb-cursor-text.portfolio .hover-display {
    width: 280px;
  }
}

.cb-cursor-text.portfolio .hover-display .hover-thumb img {
  width: 100%;
}

.cb-cursor-text.portfolio .hover-display .hover-content {
  display: grid;
  gap: 10px 30px;
  grid-template-columns: 1fr auto;
  margin-top: 14px;
  text-align: start;
}

.cb-cursor-text.portfolio .hover-display .title {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--white);
}

.cb-cursor-text.portfolio .hover-display .date {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  display: inline-block;
  color: var(--white);
}

.breadcrumb1 {
  background-color: #f0f2f4;
  padding: 250px 0px 120px;
  overflow: hidden;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1 {
    padding: 200px 0px 80px;
  }
}

.breadcrumb1__top {
  position: relative;
  display: flex;
  gap: 160px;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__top {
    gap: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__top {
    gap: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb1__top {
    flex-wrap: wrap;
  }
}

.breadcrumb1__top-left {
  position: relative;
  color: #212020;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__top-left {
    font-size: 15px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__top-left {
    font-size: 14px;
  }
}

.breadcrumb1__top-left::before {
  position: absolute;
  content: "";
  border-radius: 1px;
  background: #000;
  width: 10px;
  height: 10px;
  top: 37%;
  left: -15%;
}

.breadcrumb1__top-left::after {
  position: absolute;
  content: "";
  background: #000;
  width: 90px;
  height: 1px;
  top: 37%;
  left: 130%;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__top-left::after {
    width: 60px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__top-left::after {
    display: none;
  }
}

.breadcrumb1__top-right {
  padding: 10px 25px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-radius: 15px;
  background: #fff;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__top-right {
    padding: 10px 15px;
    gap: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__top-right {
    padding: 8px 10px;
  }
}

.breadcrumb1__top-right-img img {
  max-width: 100%;
}

.breadcrumb1__top-right-text {
  color: #101010;
  font-family: var(--font_instr);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 166.667%;
  text-transform: uppercase;
  width: 135px;
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__top-right-text {
    font-size: 13px;
  }
}

.breadcrumb1__title {
  color: #101010;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin-bottom: 110px;
}

@media only screen and (max-width: 1919px) {
  .breadcrumb1__title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .breadcrumb1__title {
    font-size: 50px;
    margin-bottom: 90px;
  }
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__title {
    font-size: 30px;
    margin-bottom: 60px;
  }
}

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

.breadcrumb1__abouttext {
  display: flex;
  justify-content: center;
  gap: 45px;
  align-items: center;
  color: var(--primary);
  font-family: var(--font_thunder);
  font-weight: 700;
  font-size: 250px;
  line-height: 250px;
  text-transform: uppercase;
  width: 100%;
}

@media only screen and (max-width: 1399px) {
  .breadcrumb1__abouttext {
    font-size: 190px;
    margin-left: 0;
  }
}

@media only screen and (max-width: 1399px) {
  .breadcrumb1__abouttext {
    font-size: 190px;
    margin-left: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .breadcrumb1__abouttext {
    font-size: 130px;
    line-height: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb1__abouttext {
    font-size: 90px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb1__abouttext {
    font-size: 100px;
    line-height: 30px;
    gap: 15px;
  }
}

.breadcrumb1__abouttext img {
  margin-bottom: 20px;
}

.breadcrumb2 {
  background-color: #f0f2f4;
  padding: 250px 0px 120px;
}

.breadcrumb2-content {
  text-align: center;
  justify-items: center;
}

.breadcrumb2-content__subtitle {
  position: relative;
  color: #000;
  display: block;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.breadcrumb2-content__subtitle::before {
  position: absolute;
  left: -15%;
  top: 36%;
  content: "";
  border-radius: 1px;
  background: #000;
  width: 10px;
  height: 10px;
}

.breadcrumb2-content__title {
  color: #000;
  font-family: Thunder;
  font-size: 380px;
  font-style: normal;
  font-weight: 700;
  line-height: 95.238%;
  text-transform: uppercase;
}

@media only screen and (min-width: 1921px) {
  .breadcrumb2-content__title {
    font-size: 320px;
  }
}

@media only screen and (max-width: 1919px) {
  .breadcrumb2-content__title {
    font-size: 300px;
  }
}

@media only screen and (max-width: 1399px) {
  .breadcrumb2-content__title {
    font-size: 210px;
  }
}

@media only screen and (max-width: 1199px) {
  .breadcrumb2-content__title {
    font-size: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb2-content__title {
    font-size: 70px;
  }
}

.breadcrumb2-content__heading {
  color: #101010;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  max-width: 1377px;
}

@media only screen and (max-width: 1919px) {
  .breadcrumb2-content__heading {
    font-size: 62px;
  }
}

@media only screen and (max-width: 1399px) {
  .breadcrumb2-content__heading {
    font-size: 52px;
  }
}

@media only screen and (max-width: 1199px) {
  .breadcrumb2-content__heading {
    font-size: 42px;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb2-content__heading {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb2-content__heading {
    font-size: 21px;
  }
}

.main-breadcumb {
  padding-top: 160px;
  position: relative;
  z-index: 1;
}

.main-breadcumb__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 157px 0;
  border-radius: 20px;
  mix-blend-mode: multiply;
}

@media only screen and (max-width: 1399px) {
  .main-breadcumb__wrap {
    padding: 100px 0;
  }
}

.main-breadcumb__title {
  position: relative;
  z-index: 6;
  color: var(--white);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.main-breadcumb__nav {
  display: block;
  position: relative;
  z-index: 6;
}

.main-breadcumb__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.main-breadcumb__item {
  font-size: 18px;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
}

.main-breadcumb__item--current {
  color: var(--white);
  font-weight: 600;
}

.main-breadcumb__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  color: var(--white);
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}

@media (max-width: 575px) {
  .main-breadcumb__link {
    font-size: 16px;
  }
}

.main-breadcumb__link:hover {
  opacity: 0.9;
  text-decoration: underline;
}

.main-breadcumb__sep {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  padding: 0 4px;
}

@media only screen and (min-width: 1921px) {
  .main-breadcumb__title {
    font-size: 72px;
  }
}

@media only screen and (max-width: 1919px) {
  .main-breadcumb__title {
    font-size: 64px;
  }
}

@media only screen and (max-width: 1399px) {
  .main-breadcumb__title {
    font-size: 56px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-breadcumb__title {
    font-size: 48px;
  }
}

@media only screen and (max-width: 991px) {
  .main-breadcumb__title {
    font-size: 40px;
  }

  .main-breadcumb__item {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .main-breadcumb__title {
    font-size: 28px;
    line-height: 1.2;
  }

  .main-breadcumb__item {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .main-breadcumb__title {
    font-size: 28px;
  }

  .main-breadcumb__item {
    font-size: 13px;
  }
}

.product-card__inner {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  position: relative;
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color-two);
}

.product-card__inner:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.1);
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orange);
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font_instr);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.product-card__image {
  background: #f1f2f3;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  height: 310px;
}

.product-card__image img {
  max-width: 100%;
  width: 221px;
  height: 249px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card__image:hover img {
  transform: scale(1.05);
}

.product-card__rating {
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.product-card__rating .product-card__stars {
  color: var(--orange);
  font-size: 0.9rem;
}

.product-card__rating .product-card__review {
  font-size: 0.85rem;
}

.product-card__title {
  color: var(--primary);
  text-align: center;
  font-family: var(--font_instr);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}

.product-card__price {
  color: var(--primary);
  color: #000;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 30px;
}

.product-card__btn {
  border: 1px solid var(--black);
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  width: 100%;
}

.product-card__btn:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

/* === Responsive === */
@media only screen and (max-width: 991px) {
  .product-card__inner {
    padding: 15px;
  }

  .product-card__image {
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .product-card__inner {
    border-radius: 16px;
  }

  .product-card__title {
    font-size: 0.95rem;
  }

  .product-card__price {
    font-size: 1rem;
  }

  .product-card__btn {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
}

/* === header scss (index 01) === */
/* === header scss (index 01) === */
.header-area {
  position: absolute;
  top: 57px;
  /* Pushed down to accommodate Top Header */
  left: 0;
  width: 100%;
}

.header-area.sticky,
.header-area.transformed {
  top: 0 !important;
}

.header-area__inner {
  gap: 30px;
  display: flex;
  padding: 0px 35px;
  align-items: center;
  border-radius: 20px;
  background: var(--white);
  justify-content: space-between;
  margin-top: 0px;
}

@media only screen and (max-width: 1199px) {
  .header-area__inner {
    padding: 10px 20px;
  }
}

@media (max-width: 575px) {
  .header-area .header__logo {
    max-width: 100px;
  }
}

.header-area .header-right {
  gap: 10px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1199px) {
  .header-area .header-right .rr-btn-green {
    display: none;
  }
}

.header-area .header-right .side-toggle .bar-icon {
  width: 30px;
  height: 7px;
}

.header-area .header-right .side-toggle .bar-icon span {
  height: 1px;
  background: var(--primary);
}

@media (max-width: 575px) {
  .header-area .header-right .rr-btn-border {
    display: none;
  }
}

.header-area .sticky,
.header-area .transformed {
  background-color: #ffffff;
}

.header-area .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

.header-area .main-menu ul.dp-menu li:hover>a {
  color: var(--red);
  background-color: transparent;
}

.header-area .main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.header-area .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.header-area .main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.header-area .main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.header-area .main-menu>ul {
  display: flex;
}

.header-area .main-menu>ul>li:hover>a {
  color: var(--red);
}

.header-area .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 42px 14px;
  color: var(--primary);
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .header-area .main-menu li a {
    padding: 29px 10px;
  }
}

.header-area .main-menu li a:hover {
  color: var(--primary);
}

.header-area .header__navicon {
  margin-left: auto;
}

.header-area .header__navicon i {
  font-size: 22px;
  color: var(--white);
}

.header-area-2 .header-area__inner {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10.25px);
  backdrop-filter: blur(10.25px);
}

.header-area-2 .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

.header-area-2 .main-menu ul.dp-menu li:hover>a {
  color: var(--green);
  background-color: transparent;
}

.header-area-2 .main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.header-area-2 .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.header-area-2 .main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.header-area-2 .main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.header-area-2 .main-menu>ul {
  display: flex;
}

.header-area-2 .main-menu>ul>li:hover>a {
  color: var(--green);
}

.header-area-2 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 42px 14px;
  color: var(--white);
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .header-area-2 .main-menu li a {
    padding: 29px 10px;
  }
}

.header-area-2 .main-menu li a:hover {
  color: var(--green);
}

.header-3 .header-area__inner {
  background: transparent;
}

.header-3 .header__nav .main-menu {
  padding: 10px;
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-3 .main-menu li a {
  padding: 10px 26.4px;
  border-radius: 500px;
  color: var(--white);
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .header-3 .main-menu li a {
    padding: 10px 20px;
  }
}

.header-3 .main-menu li:hover>a {
  color: var(--rr-common-white) !important;
  background-color: var(--lime-green);
}

.header-3 .main-menu>ul>li:first-child>a {
  padding-left: 28px;
}

.header-3 .main-menu>ul>li:last-child>a {
  padding-right: 28px;
}

.header-3 .header-right {
  gap: 35px;
  display: flex;
  align-items: center;
}

.header-3 .header-right .side-toggle {
  width: 56px;
  height: 56px;
  border-radius: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lime-green);
}

.header-3 .header-right .side-toggle .bar-icon {
  width: 30px;
  height: 13px;
}

.header-3 .header-right .side-toggle .bar-icon span {
  height: 1px;
  background: var(--white);
}

.header-3 .header-right .search-open-btn {
  gap: 11px;
  display: flex;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  align-items: center;
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--font_kanit);
}

.header-3 .header-right .search-open-btn i {
  color: var(--white);
}

.header-area-5 .header-area-5__inner {
  gap: 30px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  -webkit-backdrop-filter: blur(10.25px);
  backdrop-filter: blur(10.25px);
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
}

@media only screen and (max-width: 1199px) {
  .header-area-5 .header-area-5__inner {
    padding: 10px 20px;
  }
}

.header-area-5 .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

.header-area-5 .main-menu ul.dp-menu li:hover>a {
  color: var(--green);
  background-color: transparent;
}

.header-area-5 .main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.header-area-5 .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.header-area-5 .main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.header-area-5 .main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.header-area-5 .main-menu>ul {
  display: flex;
}

.header-area-5 .main-menu>ul>li:hover>a {
  color: var(--green);
}

.header-area-5 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 42px 14px;
  color: var(--black);
}

@media only screen and (max-width: 1399px) {
  .header-area-5 .main-menu li a {
    padding: 29px 10px;
  }
}

.header-area-5 .main-menu li a:hover {
  color: var(--white);
}

.header-area-5 .header-social {
  gap: 10px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1199px) {
  .header-area-5 .header-social {
    display: none;
  }
}

.header-area-5 .header-social li {
  list-style: none;
}

.header-area-5 .header-social li a {
  width: 40px;
  height: 40px;
  display: flex;
  color: var(--black);
  align-items: center;
  border-radius: 100px;
  justify-content: center;
  border: 1px solid var(--black);
  transition: all 0.5s ease-in-out;
}

.header-area-5 .header-social li a:hover {
  color: var(--white);
  background: var(--black);
}

.header-area-6 .header-area-6__inner {
  gap: 30px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  -webkit-backdrop-filter: blur(10.25px);
  backdrop-filter: blur(10.25px);
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

@media only screen and (max-width: 1199px) {
  .header-area-6 .header-area-6__inner {
    padding: 10px 20px;
  }
}

.header-area-6 .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

.header-area-6 .main-menu ul.dp-menu li:hover>a {
  color: var(--green);
  background-color: transparent;
}

.header-area-6 .main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.header-area-6 .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.header-area-6 .main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.header-area-6 .main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.header-area-6 .main-menu>ul {
  display: flex;
}

.header-area-6 .main-menu>ul>li:hover>a {
  color: var(--green);
}

.header-area-6 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 42px 14px;
  color: var(--white);
}

@media only screen and (max-width: 1399px) {
  .header-area-6 .main-menu li a {
    padding: 29px 10px;
  }
}

.header-area-6 .main-menu li a:hover {
  color: var(--white);
}

.header-area-6 .header-social {
  gap: 10px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1199px) {
  .header-area-6 .header-social {
    display: none;
  }
}

.header-area-6 .header-social li {
  list-style: none;
}

.header-area-6 .header-social li a {
  width: 40px;
  height: 40px;
  display: flex;
  color: var(--white);
  align-items: center;
  border-radius: 100px;
  justify-content: center;
  border: 1px solid var(--white);
  transition: all 0.5s ease-in-out;
}

.header-area-6 .header-social li a:hover {
  color: var(--black);
  background: var(--yellow);
}

.header-area-7 {
  position: absolute;
  border-bottom: 1px solid var(--black);
}

.header-area-7 .header-area-7__inner {
  gap: 30px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 1199px) {
  .header-area-7 .header-area-7__inner {
    padding: 5px 0px;
  }
}

.header-area-7 .header-area-7__inner .header-right .btn-wrap {
  padding: 23px 0;
  padding-left: 35px;
  border-left: 1px solid var(--black);
}

.header-area-7 .header-area-7__inner .header__logo {
  padding: 36px 35px 36px 0px;
  border-right: 1px solid var(--black);
}

@media only screen and (max-width: 1199px) {
  .header-area-7 .header-area-7__inner .header__logo {
    padding: 15px 10px;
  }
}

.header-area-7 .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}

.header-area-7 .main-menu ul.dp-menu li:hover>a {
  color: var(--green);
  background-color: transparent;
}

.header-area-7 .main-menu ul.dp-menu li:hover>ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}

.header-area-7 .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}

.header-area-7 .main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}

.header-area-7 .main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}

.header-area-7 .main-menu>ul {
  display: flex;
}

.header-area-7 .main-menu>ul>li:hover>a {
  color: var(--white);
}

.header-area-7 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 42px 14px;
  color: var(--black);
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .header-area-7 .main-menu li a {
    padding: 29px 10px;
  }
}

.header-area-7 .main-menu li a:hover {
  color: var(--white);
}

.header-area-7 .header-social {
  gap: 10px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1199px) {
  .header-area-7 .header-social {
    display: none;
  }
}

.header-area-7 .header-social li {
  list-style: none;
}

.header-area-7 .header-social li a {
  width: 40px;
  height: 40px;
  display: flex;
  color: var(--white);
  align-items: center;
  border-radius: 100px;
  justify-content: center;
  border: 1px solid var(--white);
  transition: all 0.5s ease-in-out;
}

.header-area-7 .header-social li a:hover {
  color: var(--black);
  background: var(--yellow);
}

/* === Icon draw scss (index 01) === */
.bar-icon {
  width: 26px;
  height: 18px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  transition: color 0.2s ease-out;
}

.bar-icon span {
  width: 100%;
  height: 2px;
  display: inline-block;
  background: var(--primary);
  transition: color 0.2s ease-out;
}

.bar-icon span:nth-child(2) {
  margin-left: 0px;
}

.bar-icon:hover span {
  animation: qode-draw 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}

.bar-icon:hover span:nth-child(2) {
  margin-left: 0px;
  animation-delay: 0.1s;
}

.bar-icon:hover span:nth-child(3) {
  animation-delay: 0.2s;
}

.bar-icon.is-black span {
  background: var(--rr-common-black);
}

.bar-icon.is-white span {
  background: var(--rr-common-white);
}

/* === Icon draw Animate scss (index 01) === */
@keyframes qode-draw {

  0%,
  100% {
    clip-path: inset(-2px 0);
  }

  42% {
    clip-path: inset(-2px 0 -2px 100%);
  }

  43% {
    clip-path: inset(-2px 100% -2px 0);
  }
}

.header-inner {
  position: relative;
}

/* === footer scss (index 01) === */
.footer-area.footer-area-5 .footer-widget-wrapper-box {
  border-bottom: none;
}

.footer-area.footer-area-5 .footer-widget-wrapper-box::before {
  display: none;
}

.footer-area.footer-area-5 .footer-widget-box .title {
  color: #999999;
}

.dark .footer-area.footer-area-5 .footer-widget-box .title {
  color: #999999;
}

.footer-area.footer-area-5 .subscribe-form {
  max-width: 515px;
}

.footer-area.footer-area-5 .subscribe-form .input-field {
  display: flex;
  gap: 10px;
  background-color: var(--white);
  padding: 28px 30px;
  border-radius: 50px;
}

.dark .footer-area.footer-area-5 .subscribe-form .input-field {
  background-color: var(--black);
}

@media only screen and (max-width: 1919px) {
  .footer-area.footer-area-5 .subscribe-form .input-field {
    padding: 18px 30px;
  }
}

.footer-area.footer-area-5 .subscribe-form .input-field input {
  width: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--primary);
}

.footer-area.footer-area-5 .subscribe-form .input-field input::-moz-placeholder {
  color: rgba(17, 17, 17, 0.3);
}

.footer-area.footer-area-5 .subscribe-form .input-field input::placeholder {
  color: rgba(17, 17, 17, 0.3);
}

.dark .footer-area.footer-area-5 .subscribe-form .input-field input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.dark .footer-area.footer-area-5 .subscribe-form .input-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.footer-area.footer-area-5 .subscribe-form .input-field i {
  rotate: -45deg;
  font-size: 20px;
  color: var(--primary);
}

.footer-area.footer-area-5 .subscription-text {
  margin-top: 23px;
}

.footer-area.footer-area-5 .subscription-text .text {
  font-size: 22px;
  line-height: 28px;
  color: var(--primary);
  max-width: 345px;
}

.footer-area.footer-area-5 .subscription-text .text a {
  position: relative;
}

.footer-area.footer-area-5 .subscription-text .text a::before {
  transition: all 0.5s;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background-color: currentColor;
}

.footer-area.footer-area-5 .subscription-text .text a:hover:hover::before {
  width: 0;
}

.footer-area.footer-area-5 .copyright-text .text a {
  color: #999999;
}

.dark .footer-area.footer-area-5 .copyright-text .text a {
  color: #999999;
}

.footer-area .copyright-area-5 {
  border-top: 1px solid var(--border);
}

.footer-area .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 0px;
  position: relative;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-wrapper-box {
    padding: 70px 0;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper-box {
    padding: 50px 0;
  }
}

.footer-area .footer-widget-wrapper-box::before {
  content: "";
  position: absolute;
  right: 795px;
  background-color: var(--border);
  width: 1px;
  height: 100%;
  top: 0;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-wrapper-box::before {
    right: 670px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area .footer-widget-wrapper-box::before {
    right: 580px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper-box::before {
    right: 480px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area .footer-widget-wrapper-box::before {
    display: none;
  }
}

.footer-area .footer-widget-wrapper-box .content .title {
  font-size: 90px;
  font-weight: 400;
  line-height: 85px;
  letter-spacing: -3.5px;
  font-family: var(--font_bdogrotesk);
  color: var(--primary);
  display: inline-block;
}

.dark .footer-area .footer-widget-wrapper-box .content .title {
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 80px;
    line-height: 85px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 70px;
    line-height: 74px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 60px;
    line-height: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 43px;
    line-height: 50px;
    letter-spacing: 0;
  }
}

@media (max-width: 575px) {
  .footer-area .footer-widget-wrapper-box .content .title {
    font-size: 35px;
    line-height: 45px;
  }
}

.footer-area .footer-widget-wrapper {
  display: grid;
  gap: 30px 170px;
  grid-template-columns: 1fr auto auto auto;
  justify-content: space-between;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-wrapper {
    gap: 30px 140px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area .footer-widget-wrapper {
    gap: 30px 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper {
    gap: 30px 53px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area .footer-widget-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 575px) {
  .footer-area .footer-widget-wrapper {
    grid-template-columns: 1fr;
  }
}

.footer-area .footer-widget-box .title {
  font-size: 22px;
  line-height: 20px;
  margin-bottom: 30px;
  color: #999999;
  font-family: var(--font_bai);
}

.dark .footer-area .footer-widget-box .title {
  color: #555555;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-box .title {
    margin-bottom: 20px;
  }
}

.footer-area .footer-nav-list:hover li a {
  opacity: 0.3;
}

.footer-area .footer-nav-list li {
  font-size: 22px;
  line-height: 30px;
  color: var(--primary);
  transition-property: opacity;
  transition-duration: 500ms;
  list-style: none;
}

.footer-area .footer-nav-list li a {
  display: block;
}

.footer-area .footer-nav-list li a:hover {
  opacity: 1;
}

.footer-area .footer-nav-list li a:hover a strong {
  opacity: 1;
  top: -23px;
}

.footer-area .footer-nav-list li a a strong {
  opacity: 0;
  transition-property: opacity, top;
  transition-duration: 250ms;
}

.footer-area .copyright-area-inner {
  padding: 48px 0;
}

@media only screen and (max-width: 1919px) {
  .footer-area .copyright-area-inner {
    padding: 38px 0;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area .copyright-area-inner {
    padding: 28px 0;
  }
}

.footer-area .copyright-text .text {
  font-size: 22px;
  line-height: 1;
  color: var(--primary);
  text-align: center;
}

@media only screen and (max-width: 1399px) {
  .footer-area .copyright-text .text {
    font-size: 20px;
  }
}

.footer-area .copyright-text .text a {
  color: #999999;
  transition: all 0.3s;
  position: relative;
}

.dark .footer-area .copyright-text .text a {
  color: #555555;
}

.footer-area .copyright-text .text a::before {
  width: 0%;
  height: 1px;
  background-color: currentColor;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
}

.footer-area .copyright-text .text a:hover {
  color: var(--black);
}

.dark .footer-area .copyright-text .text a:hover {
  color: var(--white);
}

.footer-area .copyright-text .text a:hover::before {
  width: 100%;
}

/* === footer scss (index 01) === */
.footer__area {
  background: #101010;
  padding-top: 110px;
}

.footer__area .footer-widget-wrapper__top-content {
  text-align: center;
  margin-bottom: 90px;
}

.footer__area .footer-widget-wrapper__top-content .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: #FFFFFF;
  font-family: var(--font_instr);
  margin-top: 45px;
  margin-bottom: 57px;
}

@media only screen and (max-width: 1199px) {
  .footer__area .footer-widget-wrapper__top-content .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .footer__area .footer-widget-wrapper__top-content .title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .footer__area .footer-widget-wrapper__top-content .title {
    font-size: 25px;
    line-height: 35px;
  }
}

.footer__area .footer-widget-wrapper__social ul {
  display: flex;
  gap: 17px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575px) {
  .footer__area .footer-widget-wrapper__social ul {
    flex-wrap: wrap;
  }
}

.footer__area .footer-widget-wrapper__social ul li {
  list-style: none;
}

.footer__area .footer-widget-wrapper__social ul li a {
  width: 60px;
  height: 60px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.footer__area .footer-widget-wrapper__social ul li a i {
  color: #101010;
  font-size: 25px;
  transition: all 0.3s ease-in-out;
}

.footer__area .footer-widget-wrapper__social ul li a:hover {
  background: #F14F44;
}

.footer__area .footer-widget-wrapper__social ul li a:hover i {
  color: var(--white);
}

@media only screen and (max-width: 991px) {
  .footer__area .footer-widget__box {
    margin-bottom: 20px;
  }
}

.footer__area .footer-widget__box .footer-widget-contact {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 34px 35px 34px 35px;
}

.footer__area .footer-widget__box .footer-widget-contact .sub-title {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #999999;
}

.footer__area .footer-widget__box .footer-widget-contact h4 {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #FFFFFF;
  font-family: var(--font_instr);
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}

.footer__area .footer-widget__box .footer-widget-contact h4:hover a {
  color: #F14F44;
}

.footer__area .footer-widget-text-slider {
  margin-top: 75px;
}

@media only screen and (max-width: 991px) {
  .footer__area .footer-widget-text-slider {
    margin-top: 80px;
  }
}

.footer__area .footer-widget-text-slider .text-slide h3 {
  font-weight: 700;
  font-size: 90px;
  line-height: 100px;
  text-transform: uppercase;
  color: #FFFFFF;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .footer__area .footer-widget-text-slider .text-slide h3 {
    font-size: 70px;
    line-height: 80px;
  }
}

.footer__area .footer-widget-text-slider .footer-text-slide__active .swiper-wrapper {
  display: flex;
  -moz-column-gap: 10px;
  column-gap: 10px;
  align-items: center;
  justify-content: space-between;
  transition-timing-function: linear;
}

.footer__area .footer-widget-text-slider .footer-text-slide__active .swiper-wrapper .swiper-slide {
  width: auto;
}

.footer__area .copyright-area {
  margin-top: 120px;
}

@media only screen and (max-width: 991px) {
  .footer__area .copyright-area {
    margin-top: 80px;
  }
}

.footer__area .copyright-area .copyright-area-inner {
  margin: 0 auto;
  max-width: 1433px;
  text-align: center;
  background: #F0F2F4;
  border-radius: 20px 20px 0 0;
}

.footer__area .copyright-area .copyright-area-inner .copyright-text {
  padding: 33px 0;
}

.footer__area .copyright-area .copyright-area-inner .copyright-text .text {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #101010;
  transition: all 0.3s ease-in-out;
}

.footer__area .copyright-area .copyright-area-inner .copyright-text .text:hover a {
  color: #F14F44;
}

.footer-2__inner {
  background: linear-gradient(180deg, #FFF 0%, #41F681 100%);
}

.footer-2 .footer-2-widget-wrapper {
  display: grid;
  grid-template-columns: auto 1000px auto;
}

@media only screen and (max-width: 1919px) {
  .footer-2 .footer-2-widget-wrapper {
    grid-template-columns: auto 930px auto;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-2 .footer-2-widget-wrapper {
    grid-template-columns: auto 690px auto;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-2 .footer-2-widget-wrapper {
    grid-template-columns: auto 490px auto;
  }
}

@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget-wrapper {
    grid-template-columns: auto 340px auto;
  }
}

@media only screen and (max-width: 767px) {
  .footer-2 .footer-2-widget-wrapper {
    grid-template-columns: auto;
  }
}

.footer-2 .footer-2-nav-list {
  gap: 36px;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
}

@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-nav-list {
    margin-bottom: 40px;
  }
}

.footer-2 .footer-2-nav-list li a {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--primary);
  text-transform: uppercase;
}

.footer-2 .footer-2-socal-list {
  gap: 11px;
  display: flex;
  rotate: -31deg;
  margin-top: 210px;
  list-style: none;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .footer-2 .footer-2-socal-list {
    rotate: 0deg;
    justify-content: center;
    margin-top: 60px;
  }
}

.footer-2 .footer-2-socal-list li a {
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  border-radius: 500px;
  color: var(--primary);
  justify-content: center;
  border: 1px solid var(--primary);
}

.footer-2 .footer-2-socal-list li a:hover {
  color: var(--white);
  background: var(--primary);
}

.footer-2 .footer-2-widget-box.content {
  text-align: center;
  padding-top: 130px;
  border-left: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
}

@media only screen and (max-width: 1199px) {
  .footer-2 .footer-2-widget-box.content {
    padding-top: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget-box.content {
    padding-top: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-2 .footer-2-widget-box.content {
    padding-top: 30px;
    border-left: none;
    border-right: none;
  }
}

.footer-2 .footer-2-widget-box.content .number,
.footer-2 .footer-2-widget-box.content .mail {
  color: var(--primary);
  display: block;
  font-size: 72px;
  font-weight: 600;
  line-height: 82px;
  text-transform: uppercase;
}

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

  .footer-2 .footer-2-widget-box.content .number,
  .footer-2 .footer-2-widget-box.content .mail {
    font-size: 50px;
    line-height: 60px;
  }
}

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

  .footer-2 .footer-2-widget-box.content .number,
  .footer-2 .footer-2-widget-box.content .mail {
    font-size: 35px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {

  .footer-2 .footer-2-widget-box.content .number,
  .footer-2 .footer-2-widget-box.content .mail {
    font-size: 30px;
    line-height: 40px;
  }
}

.footer-2 .footer-2-widget-box.content .mail {
  margin-top: 20px;
  margin-bottom: 45px;
}

@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget-box.content .mail {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

.footer-2 .footer-2-widget-box-wrap {
  display: flex;
  padding: 35px;
  justify-content: space-between;
  border-top: 1px solid var(--primary);
}

@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget-box-wrap {
    padding: 20px;
  }
}

.footer-2 .footer-2-widget-box-wrap .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--primary);
  text-transform: uppercase;
}

.footer-2 .footer-2-widget-box-wrap a {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
}

.footer-2 .btn-big {
  width: 210px;
  height: 210px;
  display: flex;
  margin-top: 185px;
  margin-left: 115px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  flex-direction: column;
  border-radius: 500px;
}

@media only screen and (max-width: 1919px) {
  .footer-2 .btn-big {
    margin-left: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-2 .btn-big {
    width: 140px;
    height: 140px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-2 .btn-big {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

.footer-2__bottom {
  padding-top: 145px;
  border-top: 1px solid var(--primary);
}

@media only screen and (max-width: 1199px) {
  .footer-2__bottom {
    padding-top: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-2__bottom {
    padding-top: 70px;
  }
}

@media (max-width: 575px) {
  .footer-2__bottom {
    padding-top: 50px;
  }
}

.footer-2__bottom .title {
  font-size: 300px;
  font-weight: 700;
  line-height: 150px;
  text-align: center;
  color: var(--primary);
  text-transform: uppercase;
  font-family: var(--font_thunder);
}

@media only screen and (max-width: 1919px) {
  .footer-2__bottom .title {
    font-size: 230px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-2__bottom .title {
    font-size: 190px;
    line-height: 95px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-2__bottom .title {
    font-size: 155px;
    line-height: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-2__bottom .title {
    font-size: 120px;
    line-height: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-2__bottom .title {
    font-size: 90px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .footer-2__bottom .title {
    font-size: 50px;
    line-height: 28px;
  }
}

.footer-section-3__wrapper {
  padding-top: 130px;
  padding-bottom: 90px;
  background-color: var(--black);
}

@media only screen and (max-width: 767px) {
  .footer-section-3__wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.footer-section-3__top {
  gap: 20px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.footer-section-3__copyright p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  font-family: var(--font_kanit);
}

.footer-section-3__copyright p a {
  transition: all 0.3s ease-in-out;
}

.footer-section-3__copyright p a:hover {
  color: var(--lime-green);
}

.footer-section-3__social ul {
  gap: 11px;
  display: flex;
  list-style: none;
  align-items: center;
}

.footer-section-3__social ul li a {
  display: flex;
  width: 46.39px;
  height: 46.39px;
  align-items: center;
  border-radius: 500px;
  justify-content: center;
  border: 1px solid var(--white);
  transition: all 0.3s ease-in-out;
}

.footer-section-3__social ul li a i {
  font-size: 20px;
  color: var(--white);
  transition: all 0.3s ease-in-out;
}

.footer-section-3__social ul li a:hover {
  border-color: var(--lime-green);
  background-color: var(--lime-green);
}

.footer-section-3__social ul li a:hover i {
  color: var(--black);
}

.footer-section-3__menu ul {
  gap: 30px;
  display: flex;
  list-style: none;
  align-items: center;
}

@media (max-width: 575px) {
  .footer-section-3__menu ul {
    flex-wrap: wrap;
    gap: 10px;
  }
}

.footer-section-3__menu ul li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  font-family: var(--font_kanit);
  transition: all 0.3s ease-in-out;
}

.footer-section-3__menu ul li a:hover {
  color: var(--lime-green);
}

.footer-section-3__title {
  font-weight: 700;
  font-size: 530px;
  line-height: 0.75;
  text-align: center;
  color: var(--white);
  margin-top: 90px;
  text-transform: uppercase;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1919px) {
  .footer-section-3__title {
    font-size: 400px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-section-3__title {
    font-size: 345px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-section-3__title {
    font-size: 280px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-section-3__title {
    font-size: 215px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-section-3__title {
    font-size: 165px;
  }
}

@media (max-width: 575px) {
  .footer-section-3__title {
    font-size: 85px;
  }
}

footer.footer-5-area {
  margin-top: -0.3em;
}

.footer-widget-5__wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background: linear-gradient(180deg, #FFFFFF 0%, #41F681 100%);
}

.footer-widget-5-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--black);
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-wrap {
    display: block;
  }
}

.footer-widget-5-social {
  gap: 10px;
  display: flex;
  padding-left: 119px;
  padding-right: 120px;
  align-items: center;
  transform: rotate(-31deg);
}

@media only screen and (max-width: 1399px) {
  .footer-widget-5-social {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-widget-5-social {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-social {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-social {
    padding-top: 40px;
    transform: rotate(0);
  }
}

.footer-widget-5-social a {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  color: var(--black);
  border-radius: 100%;
  justify-content: center;
  border: 1px solid var(--black);
  transition: all 0.3s ease-in-out;
}

.footer-widget-5-social a:hover {
  color: var(--white);
  background: var(--black);
}

.footer-widget-5-content {
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);
}

.footer-widget-5-info {
  display: flex;
  flex-direction: column;
  padding: 125px 170px 26px 170px;
}

@media only screen and (max-width: 1399px) {
  .footer-widget-5-info {
    padding: 90px 50px 26px 50px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-info {
    padding: 90px 20px 10px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-info {
    padding: 35px 20px 10px 20px;
  }
}

.footer-widget-5-info a {
  color: var(--primary);
  font-size: 72px;
  font-weight: 600;
  line-height: 82px;
  margin-bottom: 18px;
  text-transform: uppercase;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .footer-widget-5-info a {
    font-size: 51px;
    font-weight: 600;
    line-height: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-widget-5-info a {
    font-size: 41px;
    line-height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-info a {
    font-size: 30px;
    line-height: 23px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-info a {
    font-size: 25px;
    line-height: 19px;
  }
}

@media (max-width: 575px) {
  .footer-widget-5-info a {
    font-size: 20px;
    line-height: 13px;
  }
}

.footer-widget-5-copyright {
  display: flex;
  align-items: center;
  padding: 35px 34px 39px 34px;
  border-top: 1px solid var(--black);
  justify-content: space-between;
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-copyright {
    padding: 35px 0px 39px 0px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-copyright {
    gap: 85px;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .footer-widget-5-copyright {
    gap: 15px;
  }
}

.footer-widget-5-year {
  text-align: center;
}

.footer-widget-5-address {
  text-align: center;
}

.footer-widget-5-title {
  padding-bottom: 10px;
}

.footer-widget-5-nav-list {
  gap: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 57px;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-nav-list {
    padding-bottom: 27px;
    justify-content: left;
    padding-left: 20px;
  }
}

.footer-widget-5-nav-list li {
  list-style: none;
}

.footer-widget-5-nav-list li a {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--black);
  text-transform: uppercase;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .footer-widget-5-nav-list li a {
    font-size: 16px;
    line-height: 10px;
  }
}

.footer-widget-5-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--black);
  text-transform: uppercase;
  font-family: var(--font_instr);
}

@media (max-width: 575px) {
  .footer-widget-5-title {
    font-size: 16px;
  }
}

.footer-widget-5-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  font-family: var(--font_instr);
}

.footer-widget-5-btn {
  border-radius: 100%;
  margin: 0 125px 0 125px;
  background: var(--black);
}

@media only screen and (max-width: 1399px) {
  .footer-widget-5-btn {
    margin: 0 50px 0 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-widget-5-btn {
    margin: 0 50px 0 25px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-btn {
    margin: 0 200px 0 218px;
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .footer-widget-5-btn {
    margin: 0 70px 40px 84px;
  }
}

.footer-widget-5-btn a {
  width: 210px;
  height: 210px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--white);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-btn a {
    width: 100%;
    height: 210px;
  }
}

.footer-widget-5-btn a i {
  font-size: 22px;
  margin-bottom: 5px;
  transform: rotate(-54px);
}

.footer-widget-5-bottom .title {
  font-size: 300px;
  font-weight: 700;
  line-height: 300px;
  color: var(--black);
  padding-left: 16px;
  letter-spacing: 0;
  padding-top: 88px;
  margin-bottom: -70px;
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font_thunder);
}

@media only screen and (max-width: 1399px) {
  .footer-widget-5-bottom .title {
    font-size: 187px;
    line-height: 119px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-widget-5-bottom .title {
    font-size: 153px;
    line-height: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-widget-5-bottom .title {
    font-size: 118px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget-5-bottom .title {
    font-size: 87px;
    line-height: 10px;
  }
}

@media (max-width: 575px) {
  .footer-widget-5-bottom .title {
    font-size: 46px;
    line-height: 0px;
    padding-top: 50px;
  }
}

.blog-section__headding-wrap {
  margin: 0 auto;
  max-width: 1042px;
  text-align: center;
  padding-bottom: 119px;
}

@media only screen and (max-width: 1399px) {
  .blog-section__headding-wrap {
    padding-bottom: 50px;
  }
}

.blog-section__title {
  font-weight: 400;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  color: var(--white);
  margin-bottom: 65px;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .blog-section__title {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 575px) {
  .blog-section__title {
    padding: 15px 0;
    margin-bottom: 25px;
  }
}

.main-sidebar2-widget {
  padding: 34px 34px 34px;
  border-radius: 10px;
  background: #FFFFFF;
}

.main-sidebar2-widget:not(:last-child) {
  margin-bottom: 41px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget {
    padding: 26px 24px 26px;
  }
}

.main-sidebar2-widget__heading {
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__heading {
    margin-bottom: 17px;
  }
}

.main-sidebar2-widget__heading-title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__heading-title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-sidebar2-widget__heading-title {
    font-size: 18px;
  }
}

.main-sidebar2-widget__search-widget {
  margin-top: 20px;
}

.main-sidebar2-widget__search-widget form {
  display: flex;
  gap: 10px;
  width: 100%;
  position: relative;
}

.main-sidebar2-widget__search-widget form input {
  background-color: #EFF1F3;
  padding: 16px 20px;
  width: 80%;
  border: none;
  color: #555555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 26px;
  letter-spacing: 0%;
  text-transform: capitalize;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form input {
    padding: 14px 20px;
    width: 80%;
    font-size: 15px;
  }
}

.main-sidebar2-widget__search-widget form input::-moz-placeholder {
  color: #555555;
}

.main-sidebar2-widget__search-widget form input::placeholder {
  color: #555555;
}

.main-sidebar2-widget__search-widget form button {
  position: absolute;
  padding: 16px 20px;
  background: #000000;
  width: 60px;
  height: 60px;
  right: 6%;
  top: -1%;
  opacity: 1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form button {
    padding: 14px 20px;
    width: 60px;
    height: 55px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-sidebar2-widget__search-widget form button {
    right: 12%;
  }
}

.main-sidebar2-widget__search-widget form button svg {
  width: 19px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form button svg {
    width: 16px;
  }
}

.main-sidebar2-widget__categories ul li {
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding: 20px 0;
}

.main-sidebar2-widget__categories ul li a {
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__categories ul li a {
    font-size: 16px;
  }
}

.main-sidebar2-widget__categories ul li a .text {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__categories ul li a .text {
    font-size: 16px;
  }
}

.main-sidebar2-widget__categories ul li a .text i {
  margin-right: 10px;
}

.main-sidebar2-widget__categories ul li:hover a .text {
  margin-left: 20px;
}

.main-sidebar2-widget__post-items {
  display: flex;
  gap: 40px;
}

@media only screen and (max-width: 1919px) {
  .main-sidebar2-widget__post-items {
    gap: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items {
    gap: 20px;
  }
}

.main-sidebar2-widget__post-items:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding-bottom: 27px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items:not(:last-child) {
    padding-bottom: 15px;
  }
}

.main-sidebar2-widget__post-items-thumb {
  margin-top: 22px;
}

.main-sidebar2-widget__post-items-thumb img {
  max-width: 100%;
}

.main-sidebar2-widget__post-items-content-post {
  margin-top: 16px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post {
    margin-top: 14px;
  }
}

.main-sidebar2-widget__post-items-content-post-date {
  position: relative;
  color: #000000;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  list-style: none;
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post-date {
    font-size: 15px;
  }
}

.main-sidebar2-widget__post-items-content-post-date::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  top: 10px;
  left: -20px;
  opacity: 1;
  border-radius: 36px;
  background: #000000;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post-date::before {
    display: none;
  }
}

.main-sidebar2-widget__post-items-content-title {
  margin-top: 10px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-title {
    margin-top: 8px;
  }
}

.main-sidebar2-widget__post-items-content-title a {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-title a {
    font-size: 16px;
  }
}

.main-sidebar2-widget__tags-tagcloud {
  margin-top: 22px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__tags-tagcloud {
    margin-top: 17px;
  }
}

.main-sidebar2-widget__tags-tagcloud a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #393939;
  height: 40px;
  font-family: Kanit;
  padding: 18px 13px;
  font-size: 18px;
  font-weight: 400;
  border-radius: 36px;
  margin-top: 10px;
  border: 1px solid rgba(85, 85, 85, 0.3333333333);
  transition: all 0.3s ease-in-out;
  margin-right: 8px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__tags-tagcloud a {
    height: 30px;
    padding: 15px 13px;
    font-size: 16px;
  }
}

.main-sidebar2-widget__tags-tagcloud a:hover {
  background-color: #41F681;
  color: #000000;
  transition: all 0.3s ease-in-out;
  border: none;
}

.main-sidebar2-widget__tags-tagcloud a.active {
  background-color: #41F681;
  color: #000000;
  transition: all 0.3s ease-in-out;
  border: none;
}

/* === pages scss (index 01) === */
.about-section-wrapper .section-heading {
  margin-bottom: 130px;
  position: relative;
}

.about-section-wrapper .section-heading .shape {
  position: absolute;
  left: 18%;
  bottom: -49%;
}

.about-section-wrapper .section-heading .title {
  position: relative;
  z-index: 2;
}

.about-section-item {
  background: var(--white);
  padding: 45px 35px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.about-section-content .title {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  text-decoration-line: underline;
  color: #000000;
  margin-top: 22px;
  margin-bottom: 27px;
}

.about-section-content .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #555555;
}

@media only screen and (max-width: 991px) {
  .about-section-content .decs br {
    display: none;
  }
}

/* about-us-5 home-5 start */
.about-us-5__wrapper {
  margin: 0 auto;
  max-width: 1580px;
  text-align: center;
}

.about-us-5__wrap {
  display: grid;
  align-items: center;
  border-top: 1px solid var(--black);
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px) {
  .about-us-5__wrap {
    margin-bottom: 40px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .about-us-5__wrap {
    grid-template-columns: 1fr;
    border: none;
  }
}

.about-us-5__item {
  padding: 60px 51px 112px 51px;
  border-right: 1px solid var(--black);
}

.about-us-5__item:first-child {
  padding-left: 0;
}

.about-us-5__item:last-child {
  padding-right: 0;
  border: none;
}

@media only screen and (max-width: 1399px) {
  .about-us-5__item {
    padding: 60px 20px 112px 20px;
  }
}

@media only screen and (max-width: 991px) {
  .about-us-5__item {
    margin-bottom: 40px;
    padding: 40px 20px 60px 20px;
  }
}

@media (max-width: 575px) {
  .about-us-5__item {
    border: none;
    padding: 0px;
  }
}

.about-us-5__title {
  font-weight: 400;
  font-size: 100px;
  line-height: 100px;
  letter-spacing: 0;
  margin-bottom: 60px;
  font-family: var(--font_mono);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__title {
    line-height: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .about-us-5__title {
    font-size: 90px;
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .about-us-5__title {
    font-size: 50px;
    line-height: 1px;
  }
}

.about-us-5__subtitle {
  font-weight: 400;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  color: var(--black);
  padding-bottom: 119px;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__subtitle {
    font-size: 50px;
    padding-bottom: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .about-us-5__subtitle {
    font-size: 40px;
    line-height: 49px;
    padding-bottom: 70px;
  }
}

@media only screen and (max-width: 767px) {
  .about-us-5__subtitle {
    font-size: 35px;
    line-height: 44px;
    padding-bottom: 50px;
  }
}

@media (max-width: 575px) {
  .about-us-5__subtitle {
    font-size: 18px;
    line-height: 30px;
    padding-bottom: 60px;
  }
}

.about-us-5__subtitle strong {
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  font-family: var(--font_instr);
  color: var(--black);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__subtitle strong {
    font-size: 40px;
    line-height: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .about-us-5__subtitle strong {
    font-size: 36px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .about-us-5__subtitle strong {
    font-size: 34px;
    line-height: 26px;
  }
}

@media (max-width: 575px) {
  .about-us-5__subtitle strong {
    font-size: 20px;
  }
}

.about-us-5__text {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: var(--black);
  margin: 35px 0 38px 0;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__text {
    font-size: 22px;
    line-height: 25px;
    margin: 35px 0 20px 0;
  }
}

@media only screen and (max-width: 1199px) {
  .about-us-5__text {
    font-size: 18px;
  }
}

.about-us-5__text span {
  font-weight: 400;
  font-size: 26px;
  line-height: 36px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__text span br {
    display: none;
  }
}

@media only screen and (max-width: 1399px) {
  .about-us-5__text span {
    font-size: 22px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-us-5__text span {
    font-size: 19px;
  }
}

.about-us-5__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1399px) {
  .about-us-5__desc br {
    display: none;
  }
}

@media only screen and (max-width: 1399px) {
  .about-us-5__desc {
    font-size: 16px;
    line-height: 26px;
  }
}

.value {
  background-color: var(--gray-three);
}

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

.value__thumb__one img {
  border-radius: 10px;
}

.value__thumb__two img {
  border-radius: 10px;
}

.value .section-top7 {
  margin-bottom: 120px;
}

.value__list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 35px;
  padding-bottom: 40px;
  padding-top: 40px;
  border-bottom: 1px solid var(--border-color-one);
  border-radius: 10px;
  transition: background-color 0.25s ease;
  cursor: default;
}

.value__list:hover,
.value__list.active {
  background-color: var(--white);
}

.value__list:hover .value__left,
.value__list.active .value__left {
  gap: 120px;
}

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

  .value__list:hover .value__left,
  .value__list.active .value__left {
    gap: 30px;
  }
}

.value__list:hover .value__title>img,
.value__list.active .value__title>img {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.value__left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
}

@media only screen and (max-width: 1399px) {
  .value__left {
    flex-direction: column;
  }
}

.value__left:hover {
  gap: 120px;
}

.value__number {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--black);
  flex: 0 0 auto;
}

.value__title {
  display: flex;
  align-items: center;
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--black);
  gap: 10px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.value__title img {
  margin-right: 10px;
  width: 56px;
  height: 56px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  flex: 0 0 auto;
  width: 169px;
  height: 84px;
  border-radius: 10px;
}

.value__title:hover {
  color: var(--gray-two);
}

.value__desc {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 34px;
  color: var(--gray-two);
  max-width: 445px;
  flex: 0 0 100%;
  margin-top: 10px;
}

@media (min-width: 992px) {
  .value__desc {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .value__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .value__left {
    gap: 12px;
  }

  .value__title {
    font-size: 20px;
  }

  .value__desc {
    max-width: 100%;
  }
}

.awards {
  background-color: #0b0b0b;
  position: relative;
  z-index: 1;
}

.awards__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transition: all 0.4s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.awards__list:hover {
  background: #1a1a1a;
  border-color: var(--red);
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 1399px) {
  .awards__list {
    padding: 30px;
  }
}

.awards__name {
  font-family: var(--font_kanit);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  margin-bottom: 5px;
  transition: all 0.4s ease;
}

.awards__list:hover .awards__name {
  color: var(--red);
}

.awards__topic {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  color: var(--white);
  text-align: left;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.awards__list:hover .awards__topic {
  color: var(--white);
}

.awards__date {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: #999;
  text-transform: none;
}

/* Fix section headings inside awards section to be white */
.awards .section-top7__subtitle,
.awards .section-top7__title {
  color: #fff !important;
}

.awards .section-top7__subtitle::before {
  background: #fff !important;
}

.video__wrap {
  background: var(--gray-three);
  padding-top: 120px;
}

.video-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -390px;
  border-radius: 10px;
}

.video-thumb img {
  border-radius: 10px;
}

.video-title {
  margin-left: -100px;
  display: inline-flex;
  align-items: center;
  margin-right: -100px;
  gap: 10px;
  color: var(--white);
  font-family: var(--font_instr);
  font-weight: 700;
  font-size: 180px;
  line-height: 130px;
  text-transform: uppercase;
  padding: 509px 0 120px;
}

@media only screen and (max-width: 1919px) {
  .video-title {
    font-size: 140px;
  }
}

@media only screen and (max-width: 1399px) {
  .video-title {
    font-size: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-title {
    font-size: 90px;
  }
}

@media only screen and (max-width: 991px) {
  .video-title {
    font-size: 84px;
  }
}

@media only screen and (max-width: 767px) {
  .video-title {
    font-size: 50px;
  }
}

@media (max-width: 575px) {
  .video-title {
    font-size: 30px;
  }
}

.team .rr-btn-border {
  background: var(--black);
}

.team .rr-btn-border .text {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
}

.team .rr-btn-border .icon {
  background: var(--white);
  height: 44px;
  width: 44px;
}

/* === Hero Section (Home 01) === */
.header-1__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-1__right-btn a {
  border-radius: 90px;
  border: 1px solid #e3e3e3;
  background: rgba(241, 241, 241, 0);
  color: var(--primary);
  font-family: Kanit;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  padding: 20px 8px 20px 20px;
}

.section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.section-heading .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  color: var(--primary);
  text-decoration-line: underline;
}

@media only screen and (max-width: 1399px) {
  .section-heading .title br {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .section-heading .title {
    font-size: 40px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .section-heading .title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .section-heading .title {
    font-size: 24px;
    line-height: 34px;
  }
}

.hero-section__wrapper {
  padding-top: 257px;
  padding-bottom: 120px;
  background: #f0f2f4;
}

@media only screen and (max-width: 1199px) {
  .hero-section__wrapper {
    padding-top: 200px;
    padding-bottom: 90px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section__wrapper {
    padding-top: 200px;
    padding-bottom: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section__wrapper {
    padding-top: 150px;
  }
}

@media (max-width: 575px) {
  .hero-section__wrapper {
    padding-top: 100px;
  }
}

.hero-section__inner {
  display: grid;
  grid-template-columns: 650px 1fr;
  margin-bottom: 130px;
}

@media only screen and (max-width: 1399px) {
  .hero-section__inner {
    grid-template-columns: 460px 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-section__inner {
    margin-bottom: 90px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section__inner {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section__content {
    margin-top: 20px;
  }
}

.hero-section__content .title {
  font-weight: 600;
  font-size: 100px;
  line-height: 110px;
  text-decoration-line: underline;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .hero-section__content .title {
    font-size: 60px;
    line-height: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section__content .title {
    font-size: 70px;
    line-height: 90px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-section__content .title {
    font-size: 50px;
    line-height: 60px;
  }

  .hero-section__content .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section__content .title {
    font-size: 40px;
    line-height: 50px;
  }
}

@media (max-width: 575px) {
  .hero-section__content .title {
    font-size: 35px;
    line-height: 45px;
  }
}

.hero-section__box {
  margin-left: 180px;
}

@media only screen and (max-width: 1399px) {
  .hero-section__box {
    margin-left: 0;
  }
}

.hero-section__box .number {
  position: relative;
}

.hero-section__box .number h3 {
  font-weight: 600;
  font-size: 290px;
  line-height: 220px;
  color: var(--primary);
}

@media only screen and (max-width: 1199px) {
  .hero-section__box .number h3 {
    font-size: 250px;
  }

  .hero-section__box .number h3 br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section__box .number h3 {
    font-size: 200px;
  }
}

@media (max-width: 575px) {
  .hero-section__box .number h3 {
    font-size: 150px;
    line-height: 150px;
  }
}

.hero-section__box .number h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--primary);
  transform: rotate(-90deg);
  padding-left: 20px;
  position: absolute;
  top: 46%;
  right: 60px;
}

@media only screen and (max-width: 991px) {
  .hero-section__box .number h4 {
    transform: rotate(0deg);
  }
}

@media (max-width: 767px) {
  .hero-section__box {
    text-align: center;
    margin-left: 0;
  }

  .hero-section__box .number {
    display: inline-block;
    position: relative;
    margin-bottom: 30px;
    margin-right: 90px;
    /* Increased to balance the wider layout */
    /* Visually center the group (20+ and text) */
  }

  .hero-section__box .number h3 {
    line-height: .8;
    margin-bottom: 0;
    font-size: 160px;
  }

  .hero-section__box .number h4 {
    position: absolute;
    top: 55%;
    /* Moved slightly lower to avoid menu clipping */
    right: -20px !important;
    /* Increased negative value and forced override */
    /* Increased clearance to avoid the + sign */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%) rotate(180deg);
    transform-origin: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 14px;
    letter-spacing: 1px;
    width: auto;
    height: auto;
  }

  .hero-section__client {
    display: inline-flex;
    margin-top: 0;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-section__text h4 br {
    display: block !important;
  }
}

.hero-section__client {
  margin-top: 18px;
  gap: 15px;
  padding: 10px 25px;
  background: var(--white);
  border-radius: 15px;
  display: inline-flex;
}

@media (max-width: 575px) {
  .hero-section__client {
    flex-wrap: wrap;
  }
}

.hero-section__client .media {
  display: flex;
}

.hero-section__client .media img {
  outline: 2px solid var(--white);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
}

.hero-section__client .media img:not(:first-child) {
  margin-left: -27px;
}

.hero-section__text h4 {
  font-weight: 600;
  font-size: 15px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--primary);
}

.hero-section__card {
  background: var(--white);
  padding: 60px 45px 55px 45px;
  border-radius: 20px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1199px) {
  .hero-section__card {
    margin-top: 30px;
  }
}

@media (max-width: 575px) {
  .hero-section__card {
    padding: 30px 20px;
  }
}

.hero-section__card.card-2 .sub-title h3 {
  color: var(--white);
}

.hero-section__card.card-2 .sub-title h3::before {
  background: var(--white);
}

.hero-section__card.card-2 .sub-title h3::after {
  background: var(--white);
}

.hero-section__card.card-2 .title {
  color: var(--white);
}

.hero-section__card .sub-title h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--primary);
  font-family: var(--font_kanit);
  padding-left: 50px;
  position: relative;
}

.hero-section__card .sub-title h3::before {
  position: absolute;
  left: 0;
  top: 13px;
  background: var(--primary);
  content: "";
  height: 1px;
  width: 46px;
}

.hero-section__card .sub-title h3::after {
  position: absolute;
  left: 0;
  top: 16px;
  background: var(--primary);
  content: "";
  height: 1px;
  width: 46px;
}

.hero-section__card .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: var(--primary);
  margin-bottom: 40px;
  margin-top: 26px;
}

@media only screen and (max-width: 1919px) {
  .hero-section__card .title {
    font-size: 45px;
    line-height: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section__card .title {
    font-size: 45px;
    line-height: 60px;
  }

  .hero-section__card .title br {
    display: none;
  }
}

@media (max-width: 575px) {
  .hero-section__card .title {
    font-size: 30px;
    line-height: 40px;
  }
}

.hero-section__card .rr-btn-border {
  background: var(--primary);
  padding: 7px 15px;
}

.hero-section__card .rr-btn-border .text {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
}

.hero-section__card .rr-btn-border .icon {
  width: 44px;
  height: 44px;
  background: white;
}

.hero-section__card .rr-btn-border .icon svg {
  color: var(--primary);
}

.hero-section__thumb {
  position: relative;
}

.hero-section__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-mask-image: url(../imgs/hero/hero-img-2.png);
  mask-image: url(../imgs/hero/hero-img-2.png);
  -webkit-mask-size: 100%, 100%;
  mask-size: 100%, 100%;
}

.hero-section__thumb .video__play {
  background: #f0f2f4;
  width: 283px;
  height: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px 0px 20px 0px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.hero-section__thumb .video__play .icon {
  width: 42px;
  height: 42px;
  border: 1px solid #c2c2c5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.hero-section__thumb .video__play span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--primary);
}

.hero-section__silad-box {
  position: relative;
}

.hero-section__wrapper-box .arrow {
  position: absolute;
  width: 86px;
  height: 182px;
  border-radius: 20px;
  left: 0;
  top: 39.2%;
  display: flex;
  align-items: center;
  gap: 0px;
  justify-content: center;
  flex-wrap: wrap;
  background: #f0f2f4;
  z-index: 1;
}

@media (max-width: 575px) {
  .hero-section__wrapper-box .arrow {
    display: none;
  }
}

.hero-section__wrapper-box .arrow .rr-button {
  height: 56px;
  width: 56px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.hero-section__wrapper-box .arrow .rr-button i {
  font-size: 20px;
  color: var(--primary);
  transition: all 0.3s ease-in-out;
}

.hero-section__wrapper-box .arrow .rr-button-2 {
  transform: translateY(-15px);
}

.hero-section__wrapper-box .arrow .rr-button:hover {
  background: #f14f44;
  border: none;
}

.hero-section__wrapper-box .arrow .rr-button:hover i {
  color: var(--white);
}

.testimonials-section-wrapper {
  background: #f0f2f4;
}

.testimonials-section .section-heading .title {
  position: relative;
  z-index: 2;
}

.testimonials-section .testimonials-wrapper-box {
  display: grid;
  gap: 0px 23px;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box {
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .testimonials-section .testimonials-wrapper-box {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box>* {
    grid-column-start: auto;
  }
}

.testimonials-section .testimonials-wrapper-box>*:nth-child(2) {
  grid-column-start: 3;
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box>*:nth-child(2) {
    grid-column-start: auto;
  }
}

.testimonials-section .testimonials-wrapper-box>*:nth-child(3) {
  grid-column-start: 2;
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box>*:nth-child(3) {
    grid-column-start: auto;
  }
}

.testimonials-section .testimonials-wrapper-box>*:nth-child(5) {
  grid-column-start: 3;
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box>*:nth-child(5) {
    grid-column-start: auto;
  }
}

.testimonials-section .testimonials-wrapper-box>*:nth-child(4) {
  grid-column-start: 1;
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-wrapper-box>*:nth-child(4) {
    grid-column-start: auto;
  }
}

.testimonials-section .testimonials-item {
  background: #ffffff;
  padding: 46px 35px;
  border-radius: 10px;
  position: relative;
}

.testimonials-section .testimonials-item .testimonials-content {
  margin-bottom: 34px;
  margin-top: 34px;
}

.testimonials-section .testimonials-item .testimonials-content .decs {
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  color: var(--primary);
}

@media only screen and (max-width: 1199px) {
  .testimonials-section .testimonials-item .testimonials-content .decs {
    font-size: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonials-section .testimonials-item .testimonials-content .decs br {
    display: none;
  }
}

.testimonials-section .testimonials-item .icon i {
  color: #f14f44;
  font-size: 56px;
}

.testimonials-section .testimonials-item .testimonials-author {
  display: flex;
  gap: 20px;
  align-items: center;
}

@media (max-width: 575px) {
  .testimonials-section .testimonials-item .testimonials-author {
    flex-wrap: wrap;
  }
}

.testimonials-section .testimonials-item .testimonials-author .author-thumb {
  width: 81px;
  height: 81px;
  min-width: 81px;
  border-radius: 500px;
  overflow: hidden;
}

.testimonials-section .testimonials-item .testimonials-author .author-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonials-section .author-content .name {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: var(--primary);
  margin-bottom: 7px;
}

.testimonials-section .author-content .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #555555;
}

.project-section__wrapper {
  gap: 20px;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 767px) {
  .project-section__wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.project-section__card {
  background: var(--white);
  border-radius: 20px;
  padding: 90px 45px;
  position: relative;
}

@media only screen and (max-width: 991px) {
  .project-section__card {
    padding: 90px 30px;
  }
}

.project-section__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: #f1f1f1;
  border-bottom-left-radius: 90px;
  z-index: 1;
}

.project-section__card .icon .project-btn {
  background: var(--primary);
  width: 56px;
  height: 56px;
  border-radius: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.project-section__card:hover .icon .project-btn {
  background: #f14f44;
}

.project-section__card:hover .date {
  background: #f14f44;
}

.project-section__thumb {
  border-radius: 20px;
}

.project-section__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 20px;
}

.project-section__content .sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--primary);
  position: relative;
  margin-bottom: 35px;
  padding-left: 55px;
}

.project-section__content .sub-title::before {
  position: absolute;
  content: "";
  left: 0;
  top: 40%;
  height: 1px;
  width: 46px;
  background: var(--primary);
}

.project-section__content .sub-title::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  height: 1px;
  width: 46px;
  background: var(--primary);
}

.project-section__content .title {
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  text-decoration-line: underline;
  color: var(--primary);
  margin-bottom: 34px;
}

@media only screen and (max-width: 1399px) {
  .project-section__content .title br {
    display: none;
  }
}

@media (max-width: 575px) {
  .project-section__content .title {
    font-size: 20px;
    line-height: 30px;
  }
}

.project-section__content .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #555555;
  font-family: var(--font_kanit);
}

@media (max-width: 575px) {
  .project-section__content .decs br {
    display: none;
  }
}

.project-section__content .date {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  padding: 7px 27px;
  margin-top: 20px;
  background: var(--primary);
  border-radius: 90px;
  transform: rotate(-39deg);
  position: absolute;
  bottom: 51px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 991px) {
  .project-section__content .date {
    transform: rotate(0deg);
  }
}

@media (max-width: 575px) {
  .project-section__content .date {
    left: 30px;
    bottom: 20px;
    right: inherit;
  }
}

.project-section__content .date::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  margin-right: 6px;
}

.work-section {
  padding: 320px 0 130px;
  background: #f0f2f4;
}

.work-section__wrapper {
  background: var(--primary);
}

.work-section__item {
  background: #191919;
  padding: 25px 18px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 13px;
  border-radius: 20px;
  margin-bottom: 33px;
  transition: all 0.3s;
}

.work-section__item:hover {
  transform: translateY(-7px);
}

.work-section__item:last-child {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .work-section__item {
    grid-template-columns: 1fr;
  }
}

.work-section__number span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--white);
  transform: rotate(-39.3deg);
  background: #f14f44;
  display: inline-block;
  border-radius: 90px;
  font-family: "Kanit";
  padding: 5px 30px;
  margin-top: 28px;
}

@media (max-width: 575px) {
  .work-section__number span {
    transform: rotate(0deg);
  }
}

.work-section__content .title {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  text-decoration-line: underline;
  color: #ffffff;
  margin-bottom: 19px;
}

.work-section__content .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #999999;
}

.work-section__wrap .section-heading {
  margin-bottom: 58px;
}

.work-section__wrap .section-heading .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: #ffffff;
  text-align: start;
}

@media (max-width: 575px) {
  .work-section__wrap .section-heading .title {
    font-size: 26px;
    line-height: 36px;
  }
}

.work-section__wrap .icon-shape {
  margin-bottom: 70px;
}

.work-section__thumb {
  max-width: 850px;
  margin-left: 12px;
  position: relative;
  border-radius: 20px;
}

@media only screen and (max-width: 1199px) {
  .work-section__thumb {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 30px;
  }
}

.work-section__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.work-section__thumb .rr-btn-border {
  background: var(--red);
  color: var(--white);
  border: transparent;
  position: absolute;
  left: 35px;
  bottom: 0;
  gap: 30px;
}

@media (max-width: 575px) {
  .work-section__thumb .rr-btn-border {
    position: inherit;
    left: inherit;
    margin-top: 20px;
  }
}

.work-section__thumb .rr-btn-border .icon {
  background: var(--white);
  width: 44px;
  height: 44px;
}

.video-section__wrapper {
  padding-top: 270px;
  border-radius: 20px;
}

@media only screen and (max-width: 1399px) {
  .video-section__wrapper {
    padding-top: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-section__wrapper {
    padding-top: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-section__content {
    margin-bottom: 30px;
  }
}

.video-section__content .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: #ffffff;
  font-family: var(--font_instr);
  margin-bottom: 55px;
}

@media only screen and (max-width: 991px) {
  .video-section__content .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .video-section__content .title {
    font-size: 38px;
    line-height: 50px;
  }
}

@media (max-width: 575px) {
  .video-section__content .title {
    font-size: 31px;
    line-height: 40px;
  }
}

.video-section__content .rr-btn-border {
  background: #ffffff;
  border-radius: 90px;
  padding: 15px 18px 14px 38px;
  gap: 30px;
}

.video-section__card {
  background: #d9d9d9;
  padding: 51px 60px 8px 60px;
  border-radius: 20px 20px 0 0;
  margin-left: 53px;
}

@media only screen and (max-width: 1399px) {
  .video-section__card {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .video-section__card {
    padding: 30px 10px 10px 10px;
  }
}

.video-section__card .title {
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  text-decoration-line: underline;
  color: var(--primary);
  font-family: var(--font_instr);
  margin-bottom: 40px;
  margin-top: 60px;
}

@media (max-width: 575px) {
  .video-section__card .title {
    margin-top: 30px;
  }
}

.video-section__play .icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  background: #f14f44;
  justify-content: center;
  border-radius: 500px;
}

@media (max-width: 575px) {
  .video-section__play .icon {
    width: 80px;
    height: 80px;
  }
}

.video-section__list ul li {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--primary);
  list-style: none;
  margin-bottom: 20px;
}

.video-section__list ul li:last-child {
  margin-bottom: 0;
}

.video-section__list ul li svg {
  margin-right: 10px;
}

.service-section__info {
  gap: 40px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 125px;
}

@media only screen and (max-width: 1399px) {
  .service-section__info {
    flex-wrap: wrap;
  }
}

.service-section__info .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: var(--primary);
}

@media only screen and (max-width: 1399px) {
  .service-section__info .title br {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .service-section__info .title {
    font-size: 40px;
    line-height: 55px;
  }
}

@media (max-width: 575px) {
  .service-section__info .title {
    font-size: 25px;
    line-height: 35px;
  }
}

.service-section__info .icon {
  background: var(--white);
  height: 44px;
  width: 44px;
}

.service-section__info .rr-btn-border {
  background: var(--primary);
}

.service-section__info .rr-btn-border .text {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
}

.service-section__wrap .logo {
  background: var(--white);
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  margin-bottom: -10px;
}

@media (max-width: 575px) {
  .service-section__wrap .logo {
    margin-bottom: 0;
    width: 100px;
    height: 100px;
  }
}

.service-section__item {
  background: var(--white);
  margin-left: 130px;
  padding: 50px 45px 96px 45px;
  border-radius: 15px;
  position: relative;
  margin-bottom: 30px;
}

@media (max-width: 575px) {
  .service-section__item {
    margin-left: 0;
    margin-top: 10px;
    padding: 30px 20px 75px 20px;
  }
}

.service-section__item .number {
  margin-bottom: 30px;
}

.service-section__item .number span {
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--primary);
  font-family: var(--font_instr);
}

.service-section__item .content .title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  text-decoration-line: underline;
  color: var(--primary);
  margin-bottom: 23px;
}

.service-section__item .content .decs {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #555555;
}

.service-section__bottom .icon .project-btn {
  background: var(--primary);
  width: 56px;
  height: 56px;
  border-radius: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.service-section__bottom .dot {
  background: #f14f44;
  height: 14px;
  width: 14px;
  position: absolute;
  right: 14px;
  bottom: 18px;
  border-radius: 2px;
}

.brand__area .section-heading {
  margin-bottom: 85px;
}

.brand__item {
  background: #ffffff;
  border-radius: 10px;
  width: 200px;
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575px) {
  .brand__item {
    width: 230px;
    height: 110px;
  }
}

.brand__item img {
  -o-object-fit: cover;
  object-fit: cover;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.brand__item i {
  font-size: 48px !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-filter: none !important;
}

.brand__item:hover i {
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
}

.brand__item:hover {
  background: #ffffff !important;
  box-shadow: none !important;
}

.brand__item-box .brand-slide__active .swiper-wrapper {
  display: flex;
  -moz-column-gap: 10px;
  column-gap: 10px;
  align-items: center;
  justify-content: space-between;
  transition-timing-function: linear;
}

.brand__item-box .brand-slide__active .swiper-wrapper .swiper-slide {
  width: auto;
}

.text-slider-area {
  position: relative;
  overflow: hidden;
  padding: 60px 0 120px 0;
  margin-bottom: -1px;
  background: #F0F2F4;
}

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

.text-slider-box {
  background: var(--primary);
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
}

.text-slider-box-2 {
  position: relative;
  z-index: 2;
  background: #f14f44;
  transform: rotate(7deg);
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -34px;
}

.text-slider-box-2 .text-slider-content {
  padding: 35px 0;
  background: #f14f44;
}

@media only screen and (max-width: 991px) {
  .text-slider-box-2 .text-slider-content {
    padding: 20px 0;
  }
}

.text-slider-box-2 .text-slider-content .text {
  font-weight: 500;
  font-size: 72px;
  line-height: 82px;
  color: var(--primary);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .text-slider-box-2 .text-slider-content .text {
    font-size: 50px;
    line-height: 60px;
  }
}

.text-slider-content {
  padding: 35px 0;
}

@media only screen and (max-width: 991px) {
  .text-slider-content {
    padding: 20px 0;
  }
}

.text-slider-content .text {
  font-weight: 500;
  font-size: 72px;
  line-height: 82px;
  color: #ffffff;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .text-slider-content .text {
    font-size: 50px;
    line-height: 60px;
  }
}

.text-slider-area .text-slide__active .swiper-wrapper {
  display: flex;
  -moz-column-gap: 10px;
  column-gap: 10px;
  align-items: center;
  justify-content: space-between;
  transition-timing-function: linear;
}

.text-slider-area .text-slide__active .swiper-wrapper .swiper-slide {
  width: auto;
}

.blog__inner {
  padding-top: 130px;
  padding-bottom: 220px;
}

.blog__wrapper {
  position: relative;
}

.blog__item {
  display: flex;
  gap: 60px;
}

@media only screen and (max-width: 1919px) {
  .blog__item {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .blog__item {
    flex-wrap: wrap;
  }
}

.blog__media {
  overflow: hidden;
  border-radius: 10px;
}

.blog__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

.blog__content {
  display: flex;
  flex-direction: column;
}

.blog__top span {
  font-size: 16px;
  display: block;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  margin-bottom: 35px;
  font-family: var(--font_kanit);
}

.blog__top .title {
  font-size: 26px;
  font-weight: 500;
  line-height: 36px;
  color: var(--primary);
  margin-bottom: 35px;
  text-decoration: underline;
}

@media only screen and (max-width: 1919px) {
  .blog__top .title br {
    display: none;
  }
}

.blog__top .decs {
  color: #555;
  font-size: 16px;
  font-weight: 400;
  max-width: 394px;
  line-height: 26px;
  font-family: var(--font_kanit);
}

.blog__bottom {
  margin-top: auto;
}

.blog__bottom a {
  color: #101010;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  position: relative;
  color: var(--primary);
  padding-left: 20px;
  font-family: var(--font_kanit);
  text-decoration: underline;
}

.blog__bottom a::before {
  left: 0;
  top: 50%;
  width: 10px;
  content: "";
  height: 10px;
  position: absolute;
  border-radius: 500px;
  background: var(--primary);
  transform: translate(0, -50%);
}

.blog .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.1);
  height: 1px;
  bottom: -90px;
  top: inherit;
}

.blog .swiper-pagination-progressbar-fill {
  height: 3px;
  transition: 0.3s;
  top: -1.5px;
  background: var(--primary);
}

.features-section {
  border-radius: 16px;
}

.features-section__wrapper {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 20px;
  background-size: cover;
  border-radius: 16px;
}

.features-section__thumb {
  position: relative;
  height: 709px;
  border-radius: 16px;
}

@media only screen and (max-width: 767px) {
  .features-section__thumb {
    height: 600px;
  }
}

.features-section__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 16px;
}

.features-section__item {
  position: absolute;
  top: 0px;
  right: 75px;
}

@media only screen and (max-width: 1919px) {
  .features-section__item {
    right: 0;
  }
}

@media only screen and (max-width: 991px) {
  .features-section__item {
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Ensure minimal height for spacing */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    /* Push text top, form bottom */
    align-items: center !important;
    text-align: center !important;
    padding-bottom: 30px;
    /* General padding */
  }
}

@media only screen and (max-width: 767px) {
  .features-section__item {
    padding: 0 15px;
    padding-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .features-section__item {
    padding: 0 10px;
  }
}

.features-section__item .content {
  margin-left: 220px;
  /* Slight nudge right */
  padding-top: 130px;
  padding-bottom: 85px;
}

.features-section__item .content .title {
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  text-decoration-line: underline;
  color: #ffffff;
  margin-bottom: 35px;
}

.features-section__item .content .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #999999;
}

@media only screen and (max-width: 991px) {
  .features-section__item .content {
    margin-left: 0 !important;
    width: 70% !important;
    /* Prevent edge overlap */
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
    /* Don't stretch */
    display: block !important;
    /* Natural Text flow */
    padding-top: 40px !important;
    /* Slightly reduced */
  }

  .features-section__item .content .title {
    font-size: 32px !important;
    /* Smaller text */
    line-height: 1.2 !important;
    color: #ffffff !important;
    /* Force white */
  }

  .features-section__item .content .decs {
    font-size: 14px !important;
    color: #cccccc !important;
    /* Lighter grey for readability */
  }
}

@media only screen and (max-width: 767px) {
  .features-section__item .content {
    margin-left: -85px !important;
    padding-top: 50px !important;
  }
}

/* ... existing desktop form styles ... */
.features-section__form {
  width: 710px;
}

@media only screen and (max-width: 991px) {
  .features-section__form {
    width: 100% !important;
    /* Full width available */
    max-width: 400px !important;
    /* But limit size */
    margin-left: auto !important;
    /* Push to right */
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    /* Align container right */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Center vertically in bottom space */
    padding-bottom: 30px !important;
    padding-right: 2px !important;
    align-items: flex-end !important;
    /* Align inner items right */
  }
}

@media only screen and (max-width: 767px) {
  .features-section__form {
    width: 100% !important;
    padding-right: 2px !important;
    /* Buffer from edge */
    align-items: flex-end !important;
    /* Align inner content (button/input) right */
    align-self: flex-end !important;
    /* Align container right */
  }
}


.features-section__form .ts-subscribe-form {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.features-section__form .ts-subscribe-form .form-control {
  max-width: 455px;
  background: #191919;
  border-radius: 90px;
  border: none;
  padding: 21px 0;
  padding-left: 30px;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #999999;
}

.features-section__form .ts-subscribe-form .rr-btn-border {
  background: white;
  padding: 14px 35.2px;
}

.section-title-2__wrapper {
  margin-bottom: 130px;
}

@media only screen and (max-width: 991px) {
  .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
}

@media only screen and (max-width: 1199px) {
  .section-title-2__wrapper .title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 991px) {
  .section-title-2__wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.hero-2__area {
  background: var(--primary);
}

.hero-2__inner {
  padding-top: 230px;
  padding-bottom: 90px;
}

@media only screen and (max-width: 767px) {
  .hero-2__inner {
    padding-bottom: 60px;
  }
}

.hero-2__top {
  gap: 20px;
  display: grid;
  margin-bottom: 130px;
  grid-template-columns: 665px 1fr;
}

@media only screen and (max-width: 1919px) {
  .hero-2__top {
    grid-template-columns: 525px 1fr;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-2__top {
    grid-template-columns: 400px 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-2__top {
    grid-template-columns: 1fr;
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-2__top {
    margin-bottom: 60px;
  }
}

.hero-2__top .text {
  max-width: 340px;
}

.hero-2__top .text p {
  margin-bottom: 35px;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--white);
}

.hero-2__top .text a {
  display: flex;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
  align-items: center;
  text-transform: uppercase;
  justify-content: space-between;
  position: relative;
}

.hero-2__top .text a::before {
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  position: absolute;
  transition: all 0.3s;
  background: currentColor;
}

.hero-2__top .text a i {
  rotate: -45deg;
  transition: all 0.3s;
}

.hero-2__top .text a:hover::before {
  width: 0;
}

.hero-2__top .text a:hover i {
  rotate: 0deg;
}

.hero-2__top .sub-title {
  font-size: 50px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
}

@media only screen and (max-width: 1399px) {
  .hero-2__top .sub-title {
    font-size: 39px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-2__top .sub-title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-2__top .sub-title {
    font-size: 28px;
    line-height: 35px;
  }
}

@media (max-width: 575px) {
  .hero-2__top .sub-title {
    font-size: 25px;
    line-height: 32px;
  }
}

.hero-2__bottom {
  display: flex;
  text-align: center;
  justify-content: center;
}

.hero-2__bottom .title {
  gap: 30px;
  display: flex;
  font-size: 420px;
  font-weight: 700;
  line-height: 400px;
  color: var(--white);
  align-items: center;
  text-transform: uppercase;
  font-family: var(--font_thunder);
}

@media only screen and (max-width: 1919px) {
  .hero-2__bottom .title {
    font-size: 280px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-2__bottom .title {
    font-size: 250px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-2__bottom .title {
    font-size: 208px;
    line-height: 208px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-2__bottom .title {
    gap: 10px;
    font-size: 165px;
    line-height: 165px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-2__bottom .title {
    font-size: 120px;
    line-height: 120px;
  }
}

@media (max-width: 575px) {
  .hero-2__bottom .title {
    font-size: 60px;
    line-height: 70px;
  }
}

.hero-2__bottom .title img {
  max-width: 369px;
}

@media only screen and (max-width: 1399px) {
  .hero-2__bottom .title img {
    max-width: 250px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-2__bottom .title img {
    max-width: 200px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-2__bottom .title img {
    max-width: 150px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-2__bottom .title img {
    max-width: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-2__bottom .title img {
    max-width: 120px;
  }
}

@media (max-width: 575px) {
  .hero-2__bottom .title img {
    max-width: 75px;
  }
}

.expertise-2 .section-title-2__wrapper {
  margin-bottom: 130px;
  position: relative;
}

@media only screen and (max-width: 991px) {
  .expertise-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.expertise-2 .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: var(--white);
  position: relative;
  z-index: 1;
}

.expertise-2 .section-title-2__wrapper .title span {
  color: var(--green);
}

@media only screen and (max-width: 1399px) {
  .expertise-2 .section-title-2__wrapper .title {
    font-size: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  .expertise-2 .section-title-2__wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media only screen and (max-width: 991px) {
  .expertise-2 .section-title-2__wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }

  .expertise-2 .section-title-2__wrapper .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .expertise-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .expertise-2 .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.expertise-2 .section-title-2__wrapper .shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.expertise-2__wrapper {
  gap: 37px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.expertise-2 .expertise-2-active {
  padding-top: 20px;
  overflow: visible;
}

.expertise-2__item {
  padding: 60px 35px;
  margin-bottom: 30px;
  background: #191919;
  position: relative;
  border-radius: 10px;
  rotate: -9deg;
}

@media only screen and (max-width: 1919px) {
  .expertise-2__item {
    padding: 60px 24px;
  }
}

@media only screen and (max-width: 1199px) {
  .expertise-2__item {
    rotate: 0deg;
  }
}

.expertise-2__item::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 35px;
  background: var(--primary);
}

.expertise-2__item .shape-1,
.expertise-2__item .shape-2 {
  position: absolute;
}

.expertise-2__item .shape-1 i,
.expertise-2__item .shape-2 i {
  color: var(--white);
}

.expertise-2__item .shape-1 {
  top: 10px;
  left: 15px;
  rotate: 45deg;
}

.expertise-2__item .shape-2 {
  bottom: 10px;
  right: 15px;
  rotate: 45deg;
}

.expertise-2__item .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
}

.expertise-2__item .number {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  margin-bottom: 35px;
}

.expertise-2__item .title {
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  color: var(--white);
  margin-bottom: 30px;
}

.expertise-2__item .desc {
  font-size: 18px;
  font-weight: 400;
  max-width: 291px;
  line-height: 28px;
  color: var(--white);
  margin-bottom: 35px;
}

.expertise-2__item a {
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  transition: all 0.3s;
}

.expertise-2__item a svg path {
  transition: all 0.3s;
}

.expertise-2__item a:hover {
  background: var(--green);
}

.expertise-2__item a:hover svg path {
  stroke: var(--primary);
}

.identity-2 .section-title-2__wrapper {
  gap: 30px;
  display: flex;
  margin-bottom: 130px;
  justify-content: space-between;
}

@media only screen and (max-width: 1199px) {
  .identity-2 .section-title-2__wrapper {
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .identity-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.identity-2 .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: var(--white);
}

@media only screen and (max-width: 1919px) {
  .identity-2 .section-title-2__wrapper .title {
    font-size: 48px;
  }
}

@media only screen and (max-width: 1399px) {
  .identity-2 .section-title-2__wrapper .title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 991px) {
  .identity-2 .section-title-2__wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }

  .identity-2 .section-title-2__wrapper .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .identity-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .identity-2 .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.identity-2 .section-title-2__wrapper .btn-big {
  width: 180px;
  height: 180px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  color: var(--white);
  border-radius: 180px;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, var(--primary) 0%, #191919 100%);
}

.identity-2 .section-title-2__wrapper .btn-big::before {
  bottom: 0px;
  content: "";
  width: 26px;
  right: 30px;
  height: 26px;
  position: absolute;
  transition: all 0.6s;
  border-radius: 500px;
  background: var(--green);
  z-index: -1;
}

.identity-2 .section-title-2__wrapper .btn-big:hover::before {
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  bottom: -20px;
  right: -120px;
}

.identity-2__item {
  display: grid;
  padding: 45px 75px;
  grid-template-columns: 600px 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, var(--primary) 0%, #191919 100%);
}

@media only screen and (max-width: 1399px) {
  .identity-2__item {
    grid-template-columns: 400px 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .identity-2__item {
    grid-template-columns: 300px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .identity-2__item {
    grid-template-columns: 100px 1fr;
    padding: 20px 25px;
  }
}

@media only screen and (max-width: 767px) {
  .identity-2__item {
    grid-template-columns: 70px 1fr;
    padding: 20px 25px;
  }
}

@media (max-width: 575px) {
  .identity-2__item {
    grid-template-columns: 1fr;
    padding: 20px 25px;
  }
}

.identity-2__item:hover .text .desc {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.identity-2__item .number span {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--white);
  font-family: var(--font_instr);
}

.identity-2__item .text .title {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--white);
}

@media (max-width: 575px) {
  .identity-2__item .text .title {
    font-size: 20px;
    line-height: 30px;
  }
}

.identity-2__item .text .desc {
  color: #999;
  font-size: 18px;
  font-weight: 400;
  max-width: 624px;
  margin-top: 30px;
  line-height: 28px;
  font-family: var(--font_instr);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.service-2__area .section-title-2__wrapper {
  position: relative;
  max-width: 1397px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.service-2__area .section-title-2__wrapper .shape {
  z-index: -1;
  right: -541px;
  position: absolute;
  margin-top: -590px;
}

@media only screen and (max-width: 767px) {
  .service-2__area .section-title-2__wrapper .shape {
    display: none;
  }
}

.service-2__item {
  z-index: 2;
  padding: 60px 45px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 30px;
  background: var(--white);
}

@media only screen and (max-width: 1399px) {
  .service-2__item {
    padding: 60px 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-2__item {
    padding: 30px;
  }
}

.service-2__item::before {
  content: "";
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  position: absolute;
  background: #f0f2f4;
  border-bottom-left-radius: 15px;
}

.service-2__item .title {
  font-size: 72px;
  font-weight: 700;
  line-height: 72px;
  margin-top: 45px;
  margin-bottom: 20px;
  font-family: var(--font_thunder);
}

@media only screen and (max-width: 1919px) {
  .service-2__item .title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-2__item .title {
    font-size: 50px;
    line-height: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-2__item .title {
    font-size: 40px;
    line-height: 50px;
  }
}

.service-2__item p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
}

.service-2__item .more-btn {
  width: 110px;
  height: 110px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--white);
  align-items: center;
  justify-content: center;
  background: var(--primary);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.service-2__item .more-btn:hover {
  background: var(--green);
  color: var(--primary);
}

.service-2__list {
  margin-top: 35px;
  list-style: none;
  margin-bottom: 45px;
}

.service-2__list li {
  gap: 12px;
  display: flex;
  align-items: center;
}

.service-2__list li:not(:last-child) {
  margin-bottom: 20px;
}

.milestone-2__area .section-title-2__wrapper {
  margin-bottom: 130px;
}

@media only screen and (max-width: 991px) {
  .milestone-2__area .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.milestone-2__area .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
}

@media only screen and (max-width: 1199px) {
  .milestone-2__area .section-title-2__wrapper .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .milestone-2__area .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }

  .milestone-2__area .section-title-2__wrapper .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .milestone-2__area .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .milestone-2__area .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.milestone-2__area .navigation {
  position: absolute;
  left: 75px;
  bottom: 30px;
  gap: 9px;
  align-items: center;
  border-radius: 90px;
  padding: 9px;
  display: inline-flex;
  background: #f0f2f4;
  border: 1px solid rgba(16, 16, 16, 0.1);
}

@media only screen and (max-width: 1199px) {
  .milestone-2__area .navigation {
    bottom: 0;
  }
}

.milestone-2__area .navigation .milestone-2-prev,
.milestone-2__area .navigation .milestone-2-next {
  width: 54px;
  height: 26px;
  display: flex;
  border-radius: 90px;
  transition: all 0.3s;
  background: var(--primary);
}

.milestone-2__area .navigation .milestone-2-prev:hover,
.milestone-2__area .navigation .milestone-2-next:hover {
  background-color: var(--green);
}

.milestone-2__inner {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--primary);
}

.milestone-2__wrapper {
  margin-left: 70px;
}

@media only screen and (max-width: 1199px) {
  .milestone-2__wrapper {
    margin-left: 30px;
  }
}

.milestone-2__active {
  padding-left: 10px;
}

.milestone-2__item {
  max-width: 462px;
  padding: 0px 36px 18px 35px;
  border-left: 1px solid;
  position: relative;
}

@media only screen and (max-width: 1199px) {
  .milestone-2__item {
    padding: 0px 20px 18px 20px;
  }
}

.milestone-2__item::before {
  top: 0;
  left: -7px;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 500px;
  background: var(--primary);
}

.milestone-2__item::after {
  bottom: 0;
  left: -7px;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 500px;
  background: var(--primary);
}

.milestone-2__item .has-line {
  border-right: 1px solid;
  position: relative;
  padding-right: 36px;
}

.milestone-2__item .has-line::before {
  top: 0;
  right: -7px;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 500px;
  background: var(--primary);
}

.milestone-2__item .has-line::after {
  bottom: 0;
  right: -7px;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 500px;
  background: var(--primary);
}

.milestone-2__content {
  margin-bottom: 35px;
}

.milestone-2__content span {
  color: var(--primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  display: block;
  margin-bottom: 10px;
  font-family: var(--font_instr);
}

.milestone-2__content .title {
  color: var(--primary);
  font-size: 26px;
  font-weight: 600;
  line-height: 36px;
  margin-bottom: 25px;
}

.milestone-2__content p {
  color: var(--primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  font-family: var(--font_instr);
}

.milestone-2__media {
  overflow: hidden;
  border-radius: 20px;
}

.milestone-2__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.milestone-2__shape {
  position: absolute;
  bottom: 42px;
  right: 0;
  left: 151px;
}

@media only screen and (max-width: 1199px) {
  .milestone-2__shape {
    bottom: 15px;
  }
}

.contact__inner {
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
  border-radius: 20px;
}

.contact__wrapper {
  gap: 170px;
  display: grid;
  grid-template-columns: 909px auto;
}

@media only screen and (max-width: 1919px) {
  .contact__wrapper {
    gap: 100px;
    grid-template-columns: 650px auto;
  }
}

@media only screen and (max-width: 1399px) {
  .contact__wrapper {
    gap: 100px;
    grid-template-columns: 550px auto;
  }
}

@media only screen and (max-width: 1199px) {
  .contact__wrapper {
    gap: 100px;
    grid-template-columns: 1fr;
  }
}

.contact__info {
  padding: 60px;
  border-radius: 20px;
  background: var(--white);
}

@media only screen and (max-width: 1399px) {
  .contact__info {
    padding: 60px 40px;
  }
}

@media (max-width: 575px) {
  .contact__info {
    padding: 30px 20px;
  }
}

.contact__info .title {
  gap: 15px;
  display: flex;
  font-size: 50px;
  font-weight: 600;
  line-height: 60px;
  color: var(--primary);
  align-items: center;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--primary);
}

@media only screen and (max-width: 1399px) {
  .contact__info .title {
    font-size: 45px;
  }
}

@media (max-width: 575px) {
  .contact__info .title {
    flex-wrap: wrap;
    font-size: 35px;
    line-height: 40px;
    padding-bottom: 30px;
  }
}

.contact__info .rating {
  gap: 10px;
  margin-top: 60px;
  padding: 13px 25px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  margin-bottom: 45px;
}

.contact__info .rating i {
  color: var(--white);
}

.contact__info .rating span {
  display: block;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--white);
}

.contact__info .desc {
  font-size: 26px;
  font-weight: 500;
  line-height: 36px;
  color: var(--primary);
  font-family: var(--font_instr);
}

@media (max-width: 575px) {
  .contact__info .desc {
    font-size: 22px;
    line-height: 30px;
  }
}

.contact__info .author {
  gap: 15px;
  display: flex;
  font-size: 26px;
  font-weight: 600;
  margin-top: 45px;
  line-height: 36px;
  align-items: center;
  color: var(--primary);
  font-family: var(--font_instr);
}

.contact__info .author span {
  font-size: 26px;
  font-weight: 600;
  line-height: 36px;
}

.contact__info a {
  gap: 15px;
  display: flex;
  font-size: 26px;
  font-weight: 600;
  line-height: 36px;
  margin-top: 130px;
  align-items: center;
  color: var(--primary);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .contact__info a {
    margin-top: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact__info a {
    margin-top: 50px;
  }
}

.contact-us__form-wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: var(--primary);
  margin-bottom: 90px;
}

@media only screen and (max-width: 1399px) {
  .contact-us__form-wrapper .title {
    font-size: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-us__form-wrapper .title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-us__form-wrapper .title {
    font-size: 35px;
    line-height: 45px;
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .contact-us__form-wrapper .title {
    font-size: 30px;
    line-height: 45px;
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .contact-us__form-wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.contact-us__form-wrapper .contact-us__form .contact-us__input input {
  outline: none;
  width: 100%;
  border: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 60px;
  color: var(--primary);
  background: transparent;
  font-family: var(--font_instr);
  border-bottom: 1px solid var(--primary);
}

.contact-us__form-wrapper .contact-us__form .contact-us__input input::-moz-placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  font-family: var(--font_instr);
}

.contact-us__form-wrapper .contact-us__form .contact-us__input input::placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  font-family: var(--font_instr);
}

.contact-us__form-wrapper .contact-us__form .contact-us__textarea {
  position: relative;
}

.contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea {
  width: 100%;
  border: none;
  height: 120px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 35px;
  color: var(--primary);
  background: transparent;
  font-family: var(--font_instr);
  border-bottom: 1px solid var(--primary);
}

.contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea::-moz-placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  font-family: var(--font_instr);
}

.contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea::placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  font-family: var(--font_instr);
}

.contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea:hover,
.contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea:focus {
  outline: none;
}

.contact-us__form-wrapper .contact-us__form .btn-black {
  width: 110px;
  height: 110px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--white);
  align-items: center;
  justify-content: center;
  background: var(--primary);
  transition: all 0.3s;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.contact-us__form-wrapper .contact-us__form .btn-black:hover {
  background: var(--white);
  color: var(--primary);
}

.blog-2 .section-title-2__wrapper {
  gap: 30px;
  display: flex;
  margin-bottom: 130px;
  justify-content: space-between;
}

@media only screen and (max-width: 1199px) {
  .blog-2 .section-title-2__wrapper {
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.blog-2 .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: var(--white);
}

@media only screen and (max-width: 1919px) {
  .blog-2 .section-title-2__wrapper .title {
    font-size: 48px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-2 .section-title-2__wrapper .title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-2 .section-title-2__wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }

  .blog-2 .section-title-2__wrapper .title br {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .blog-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .blog-2 .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.blog-2 .section-title-2__wrapper .btn-big {
  width: 180px;
  height: 180px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  color: var(--white);
  border-radius: 180px;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, var(--primary) 0%, #191919 100%);
}

.blog-2 .section-title-2__wrapper .btn-big::before {
  bottom: 0px;
  content: "";
  width: 26px;
  right: 30px;
  height: 26px;
  position: absolute;
  transition: all 0.6s;
  border-radius: 500px;
  background: var(--green);
  z-index: -1;
}

.blog-2 .section-title-2__wrapper .btn-big:hover::before {
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  bottom: -20px;
  right: -120px;
}

.blog-2__warpper {
  position: relative;
}

@media only screen and (max-width: 1199px) {
  .blog-2__warpper {
    position: inherit;
  }
}

.blog-2__media {
  bottom: 215px;
  right: 558px;
  z-index: 1;
  position: absolute;
}

@media only screen and (max-width: 1919px) {
  .blog-2__media {
    right: 420px;
    max-width: 350px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-2__media {
    right: 390px;
    max-width: 300px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-2__media {
    right: 390px;
    max-width: 300px;
    position: inherit;
    right: inherit;
  }
}

.blog-2__item {
  display: grid;
  padding: 45px;
  height: 170px;
  overflow: hidden;
  transition: height 0.5s ease;
  grid-template-columns: auto 330px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-2__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 1199px) {
  .blog-2__item {
    gap: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-2__item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .blog-2__item {
    padding: 30px 20px;
  }
}

.blog-2__item:hover {
  height: 256px;
}

@media only screen and (max-width: 991px) {
  .blog-2__item:hover {
    height: 300px;
  }
}

.blog-2__item .title {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--white);
  transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px) {
  .blog-2__item .title {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .blog-2__item .title {
    font-size: 22px;
    line-height: 28px;
  }
}

.blog-2__item .title a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-2__item .title:hover a {
  text-decoration: underline;
  color: var(--white);
}

.blog-2__item .desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  max-width: 540px;
  margin-top: 30px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.blog-2__item:hover .desc {
  opacity: 1;
  transform: translateY(0);
}

.blog-2__item .meta-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 20px;
}

@media (max-width: 575px) {
  .blog-2__item .meta-list {
    flex-wrap: wrap;
    gap: 10px;
  }
}

.blog-2__item .meta-list li {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--white);
  text-align: center;
  position: relative;
  padding-left: 22px;
}

.blog-2__item .meta-list li::before {
  content: "";
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 2px;
  background: var(--white);
  transform: translateY(-50%);
}

.blog-2__item .rr-btn-green {
  margin-top: 40px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.blog-2__item:hover .rr-btn-green {
  opacity: 1;
  transform: translateY(0);
}

.future-2 .section-title-2__wrapper {
  margin-bottom: 130px;
}

@media only screen and (max-width: 991px) {
  .future-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.future-2 .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: white;
}

@media only screen and (max-width: 1399px) {
  .future-2 .section-title-2__wrapper .title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 1199px) {
  .future-2 .section-title-2__wrapper .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .future-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .future-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .future-2 .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.future-2__wrapper {
  position: relative;
}

.future-2__wrapper .shape {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.future-2 .future-top {
  gap: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -26px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 1199px) {
  .future-2 .future-top {
    gap: 10px;
    margin-bottom: -10px;
  }
}

@media only screen and (max-width: 767px) {
  .future-2 .future-top {
    gap: 10px;
    margin-bottom: 10px;
  }
}

@media (max-width: 575px) {
  .future-2 .future-top {
    flex-wrap: wrap;
  }
}

.future-2 .future-top__item {
  width: 280px;
  height: 280px;
  min-width: 280px;
  display: flex;
  align-items: center;
  border-radius: 500px;
  justify-content: center;
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
}

@media only screen and (max-width: 1919px) {
  .future-2 .future-top__item {
    width: 200px;
    height: 200px;
    min-width: 200px;
  }
}

@media only screen and (max-width: 1399px) {
  .future-2 .future-top__item {
    width: 180px;
    height: 180px;
    min-width: 180px;
  }
}

@media only screen and (max-width: 1199px) {
  .future-2 .future-top__item {
    width: 150px;
    height: 150px;
    min-width: 150px;
  }
}

@media (max-width: 575px) {
  .future-2 .future-top__item {
    width: 120px;
    height: 120px;
    min-width: 120px;
  }
}

@media (max-width: 575px) {
  .future-2 .future-top__item img {
    max-width: 70px;
  }
}

.future-2 .future-bottom {
  gap: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 1199px) {
  .future-2 .future-bottom {
    gap: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .future-2 .future-bottom {
    flex-wrap: wrap;
  }
}

.future-2 .future-bottom__item {
  width: 280px;
  height: 280px;
  min-width: 280px;
  display: flex;
  align-items: center;
  border-radius: 500px;
  justify-content: center;
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
}

@media only screen and (max-width: 1919px) {
  .future-2 .future-bottom__item {
    width: 200px;
    height: 200px;
    min-width: 200px;
  }
}

@media only screen and (max-width: 1399px) {
  .future-2 .future-bottom__item {
    width: 180px;
    height: 180px;
    min-width: 180px;
  }
}

@media only screen and (max-width: 1199px) {
  .future-2 .future-bottom__item {
    width: 150px;
    height: 150px;
    min-width: 150px;
  }
}

@media (max-width: 575px) {
  .future-2 .future-bottom__item {
    width: 120px;
    height: 120px;
    min-width: 120px;
  }
}

@media (max-width: 575px) {
  .future-2 .future-bottom__item img {
    max-width: 70px;
  }
}

.counter-2 .section-title-2__wrapper {
  margin-bottom: 130px;
}

@media only screen and (max-width: 991px) {
  .counter-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.counter-2 .section-title-2__wrapper .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  color: white;
}

@media only screen and (max-width: 1399px) {
  .counter-2 .section-title-2__wrapper .title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 1199px) {
  .counter-2 .section-title-2__wrapper .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .counter-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-2 .section-title-2__wrapper .title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .counter-2 .section-title-2__wrapper .title {
    font-size: 20px;
    line-height: 32px;
  }
}

.counter-2__item {
  padding: 60px 35px;
  margin-bottom: 30px;
  background: #191919;
  position: relative;
  border-radius: 10px;
}

@media only screen and (max-width: 1919px) {
  .counter-2__item {
    padding: 60px 24px;
  }
}

.counter-2__item::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 35px;
  background: var(--primary);
}

.counter-2__item .shape-1,
.counter-2__item .shape-2 {
  position: absolute;
}

.counter-2__item .shape-1 i,
.counter-2__item .shape-2 i {
  color: var(--white);
}

.counter-2__item .shape-1 {
  top: 10px;
  left: 15px;
  rotate: 45deg;
}

.counter-2__item .shape-2 {
  bottom: 10px;
  right: 15px;
  rotate: 45deg;
}

.counter-2__item .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
}

.counter-2__item .title {
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
  font-size: 100px;
  font-weight: 600;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .counter-2__item .title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-2__item .title {
    font-size: 60px;
    margin-bottom: 10px;
  }
}

@media (max-width: 575px) {
  .counter-2__item .title {
    font-size: 50px;
  }
}

.counter-2__item .title span {
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
  font-weight: 600;
  font-size: 100px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
}

.counter-2__item .title span .odometer-inside .odometer-digit .odometer-digit-spacer {
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
  font-weight: 600;
  font-size: 100px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
}

.counter-2__item .title span .odometer-inside .odometer-digit .odometer-digit-inner .odometer-ribbon .odometer-ribbon-inner .odometer-value {
  background: linear-gradient(180deg, #fff 0%, #41f681 100%);
  font-weight: 600;
  font-size: 100px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 1399px) {
  .counter-2__item .title span {
    font-size: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-2__item .title span {
    font-size: 60px;
  }
}

@media (max-width: 575px) {
  .counter-2__item .title span {
    font-size: 50px;
  }
}

.counter-2__item p {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

@media only screen and (max-width: 1399px) {
  .counter-2__item p br {
    display: none;
  }
}

.recent-work-2 .section-title-2__wrapper {
  margin-bottom: 130px;
}

@media only screen and (max-width: 1399px) {
  .recent-work-2 .section-title-2__wrapper {
    margin-bottom: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .recent-work-2 .section-title-2__wrapper {
    margin-bottom: 60px;
  }
}

.recent-work-2 .section-title-2__wrapper .title {
  gap: 70px;
  display: flex;
  font-weight: 700;
  color: var(--primary);
  font-size: 300px;
  line-height: 300px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--font_thunder);
}

.recent-work-2 .section-title-2__wrapper .title span {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .recent-work-2 .section-title-2__wrapper .title {
    gap: 50px;
    font-size: 220px;
  }
}

@media only screen and (max-width: 1399px) {
  .recent-work-2 .section-title-2__wrapper .title {
    font-size: 185px;
    line-height: 185px;
  }
}

@media only screen and (max-width: 1199px) {
  .recent-work-2 .section-title-2__wrapper .title {
    font-size: 150px;
    line-height: 160px;
  }
}

@media only screen and (max-width: 991px) {
  .recent-work-2 .section-title-2__wrapper .title {
    gap: 20px;
    font-size: 120px;
    line-height: 120px;
  }
}

@media only screen and (max-width: 767px) {
  .recent-work-2 .section-title-2__wrapper .title {
    font-size: 85px;
    line-height: 95px;
  }
}

@media (max-width: 575px) {
  .recent-work-2 .section-title-2__wrapper .title {
    font-size: 48px;
    line-height: 62px;
  }
}

.recent-work-2__wrapper {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: 225px auto 225px;
}

@media only screen and (max-width: 1919px) {
  .recent-work-2__wrapper {
    grid-template-columns: 200px auto 200px;
  }
}

@media only screen and (max-width: 1399px) {
  .recent-work-2__wrapper {
    grid-template-columns: 160px auto 160px;
  }
}

@media only screen and (max-width: 767px) {
  .recent-work-2__wrapper {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .recent-work-2__box {
    display: flex;
  }
}

.recent-work-2__box .number {
  gap: 15px;
  padding: 25px;
  list-style: none;
  align-items: center;
  display: inline-flex;
  border-radius: 90px;
  flex-direction: column;
  border: 1px solid var(--primary);
}

@media only screen and (max-width: 767px) {
  .recent-work-2__box .number {
    padding: 10px 30px;
    margin: 0 auto;
    flex-direction: row;
    margin-bottom: 20px;
  }
}

.recent-work-2__box .number li {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--primary);
  text-transform: uppercase;
}

.recent-work-2__box span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  text-align: right;
  line-height: 30px;
  color: var(--primary);
  text-transform: uppercase;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .recent-work-2__box span {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
  }
}

.recent-work-2__box span::before {
  content: "";
  position: absolute;
  top: 0;
  width: 130px;
  height: 1px;
  right: 0;
  background: var(--primary);
}

@media only screen and (max-width: 767px) {
  .recent-work-2__box span::before {
    left: 50%;
    transform: translate(-50%, 0px);
  }
}

.recent-work-2__item {
  position: relative;
}

.recent-work-2__item .media {
  border-radius: 10px;
  overflow: hidden;
}

.recent-work-2__item .media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.recent-work-2__item .title {
  left: 50%;
  bottom: 60px;
  font-size: 72px;
  font-weight: 700;
  line-height: 72px;
  color: var(--white);
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font_thunder);
  transform: translate(-50%, 0px);
}

@media only screen and (max-width: 1399px) {
  .recent-work-2__item .title {
    bottom: 50px;
    font-size: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .recent-work-2__item .title {
    bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .recent-work-2__item .title {
    font-size: 45px;
    line-height: 55px;
  }
}

@media (max-width: 575px) {
  .recent-work-2__item .title {
    position: inherit;
    left: initial;
    color: var(--primary);
    transform: inherit;
    bottom: inherit;
    margin-top: 20px;
  }
}

.recent-work-2__item .title:hover a {
  color: var(--green);
}

.recent-work-2__item .btn-circle {
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  position: absolute;
  color: var(--primary);
  align-items: center;
  justify-content: center;
  background: var(--white);
  transform: translate(-50%, -50%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.recent-work-2__item .btn-circle:hover {
  background: var(--green);
  color: var(--primary);
}

@media only screen and (max-width: 991px) {
  .recent-work-2__item .btn-circle {
    width: 90px;
    height: 90px;
    top: 35%;
  }
}

.Projects-area-10-inner {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 225px auto 225px;
}

@media only screen and (max-width: 1919px) {
  .Projects-area-10-inner {
    grid-template-columns: 200px auto 200px;
  }
}

@media only screen and (max-width: 1399px) {
  .Projects-area-10-inner {
    grid-template-columns: 160px auto 160px;
  }
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner {
    grid-template-columns: 1fr;
  }
}

.Projects-area-10-inner .Projects__content ul {
  gap: 15px;
  padding: 25px;
  list-style: none;
  align-items: center;
  display: inline-flex;
  border-radius: 90px;
  flex-direction: column;
  border: 1px solid var(--primary);
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner .Projects__content ul {
    padding: 10px 30px;
    margin: 0 auto;
    flex-direction: row;
    margin-bottom: 20px;
  }
}

.Projects-area-10-inner .Projects__content ul li {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--primary);
  text-transform: uppercase;
}

.Projects-area-10-inner .Projects__content ul li.active {
  color: var(--green);
}

.Projects-area-10-inner .recent-work-2__box {
  position: relative;
  z-index: 10;
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner .recent-work-2__box {
    display: flex;
  }
}

.Projects-area-10-inner .recent-work-2__box .number {
  gap: 15px;
  padding: 25px;
  list-style: none;
  align-items: center;
  display: inline-flex;
  border-radius: 90px;
  flex-direction: column;
  border: 1px solid var(--primary);
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner .recent-work-2__box .number {
    padding: 10px 30px;
    margin: 0 auto;
    flex-direction: row;
    margin-bottom: 20px;
  }
}

.Projects-area-10-inner .recent-work-2__box .number li {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--primary);
  text-transform: uppercase;
}

.Projects-area-10-inner .recent-work-2__box span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  text-align: right;
  line-height: 30px;
  color: var(--primary);
  text-transform: uppercase;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner .recent-work-2__box span {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
  }
}

.Projects-area-10-inner .recent-work-2__box span::before {
  content: "";
  position: absolute;
  top: 0;
  width: 130px;
  height: 1px;
  right: 0;
  background: var(--primary);
}

@media only screen and (max-width: 767px) {
  .Projects-area-10-inner .recent-work-2__box span::before {
    left: 50%;
    transform: translate(-50%, 0px);
  }
}

.Projects-area-10-inner .Projects__item {
  position: relative;
  margin-bottom: 30px;
}

.Projects-area-10-inner .Projects__item .z-0 {
  z-index: 0;
}

.Projects-area-10-inner .Projects__item .z-1 {
  z-index: 1;
}

.Projects-area-10-inner .Projects__item .z-2 {
  z-index: 2;
}

.Projects-area-10-inner .Projects__item .z-3 {
  z-index: 3;
}

.Projects-area-10-inner .Projects__item .media {
  border-radius: 10px;
  overflow: hidden;
}

.Projects-area-10-inner .Projects__item .media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.Projects-area-10-inner .Projects__item .title {
  left: 50%;
  bottom: 60px;
  font-size: 72px;
  font-weight: 700;
  line-height: 72px;
  color: var(--white);
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font_thunder);
  transform: translate(-50%, 0px);
}

@media only screen and (max-width: 1399px) {
  .Projects-area-10-inner .Projects__item .title {
    bottom: 50px;
    font-size: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .Projects-area-10-inner .Projects__item .title {
    bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .Projects-area-10-inner .Projects__item .title {
    font-size: 45px;
    line-height: 55px;
  }
}

@media (max-width: 575px) {
  .Projects-area-10-inner .Projects__item .title {
    position: inherit;
    left: initial;
    color: var(--primary);
    transform: inherit;
    bottom: inherit;
    margin-top: 20px;
  }
}

.Projects-area-10-inner .Projects__item .title:hover a {
  color: var(--green);
}

.Projects-area-10-inner .Projects__item .btn-circle {
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  position: absolute;
  color: var(--primary);
  align-items: center;
  justify-content: center;
  background: var(--white);
  transform: translate(-50%, -50%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.Projects-area-10-inner .Projects__item .btn-circle:hover {
  background: var(--green);
  color: var(--primary);
}

@media only screen and (max-width: 991px) {
  .Projects-area-10-inner .Projects__item .btn-circle {
    width: 90px;
    height: 90px;
    top: 35%;
  }
}

.hero-section-3__wrapper {
  position: relative;
  padding-top: 220px;
  padding-bottom: 140px;
  background-color: var(--black);
}

@media only screen and (max-width: 1199px) {
  .hero-section-3__wrapper {
    padding-top: 180px;
  }
}

@media (max-width: 575px) {
  .hero-section-3__wrapper {
    padding-top: 140px;
  }
}

.hero-section-3__wrap {
  margin-left: 105px;
}

@media only screen and (max-width: 1199px) {
  .hero-section-3__wrap {
    margin-left: 50px;
  }
}

@media (max-width: 575px) {
  .hero-section-3__wrap {
    margin-left: 0px;
  }
}

.hero-section-3__content {
  gap: 596px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media only screen and (max-width: 1919px) {
  .hero-section-3__content {
    gap: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-3__content {
    gap: 30px;
  }
}

.hero-section-3__left {
  padding: 8px;
  padding-top: 12px;
  border-radius: 6px;
  display: inline-block;
  background-color: var(--white);
}

.hero-section-3__time {
  margin-bottom: 12px;
}

.hero-section-3__time span {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  text-transform: uppercase;
  font-family: var(--font_kanit);
}

.hero-section-3__thumb img {
  border-radius: 6px;
}

.hero-section-3__box-shape {
  margin-bottom: 30px;
}

.hero-section-3__box-shape span {
  width: 4px;
  height: 20px;
  display: inline-block;
  border: 1px solid var(--white);
}

.hero-section-3__box-shape span:last-of-type {
  width: 15px;
}

.hero-section-3__dec {
  font-size: 20px;
  font-weight: 400;
  max-width: 363px;
  line-height: 30px;
  color: var(--white);
  font-family: var(--font_instr);
}

.hero-section-3__title {
  font-size: 120px;
  font-weight: 600;
  margin-top: 45px;
  max-width: 1400px;
  line-height: 130px;
  color: var(--white);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .hero-section-3__title {
    font-size: 100px;
    line-height: 110px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-3__title {
    font-size: 85px;
    line-height: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3__title {
    font-size: 60px;
    line-height: 70px;
  }
}

@media (max-width: 575px) {
  .hero-section-3__title {
    font-size: 45px;
    line-height: 60px;
  }
}

.hero-section-3__title span {
  color: var(--lime-green);
}

.hero-section-3__title .tr-btn {
  padding: 18px 33.6px;
  transform: rotate(-30deg) translateY(-40px);
}

@media only screen and (max-width: 1199px) {
  .hero-section-3__title .tr-btn {
    transform: rotate(0deg) translateY(-10px);
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3__title .tr-btn {
    transform: rotate(0deg) translateY(0px);
  }
}

.hero-section-3__social {
  left: -200px;
  bottom: 430px;
  position: absolute;
  transform: rotate(-90deg);
}

@media only screen and (max-width: 1199px) {
  .hero-section-3__social {
    left: -264px;
  }
}

@media (max-width: 575px) {
  .hero-section-3__social {
    display: none;
  }
}

.hero-section-3__social ul {
  gap: 12px;
  display: flex;
  list-style: none;
  align-items: center;
}

.hero-section-3__social ul li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 7px 22px;
  color: var(--white);
  border-radius: 500px;
  display: inline-block;
  font-family: var(--font_kanit);
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.01);
}

.hero-section-3__social ul li a span {
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 500px;
  display: inline-block;
  transform: translateY(-1px);
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
}

.hero-section-3__social ul li a:hover {
  color: var(--black);
  background-color: var(--lime-green);
}

.hero-section-3__social ul li a:hover span {
  background-color: var(--black);
}

.tr-btn {
  gap: 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  border-radius: 500px;
  color: var(--black);
  align-items: center;
  padding: 18px 57.1px;
  display: inline-flex;
  font-family: var(--font_kanit);
  background-color: var(--lime-green);
}

@media (max-width: 575px) {
  .tr-btn {
    padding: 14px 30px;
  }
}

.section__subtitle {
  gap: 10px;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  padding: 7px 26px;
  align-items: center;
  color: var(--black);
  display: inline-flex;
  border-radius: 500px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  font-family: var(--font_kanit);
}

.section__subtitle span {
  width: 10px;
  height: 10px;
  border-radius: 500px;
  display: inline-block;
  background-color: var(--lime-green);
}

.section__title {
  font-size: 72px;
  font-weight: 500;
  margin-top: 33px;
  line-height: 82px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .section__title br {
    display: none;
  }
}

@media only screen and (max-width: 1399px) {
  .section__title {
    font-size: 65px;
    line-height: 75px;
  }
}

@media only screen and (max-width: 1199px) {
  .section__title {
    font-size: 55px;
    line-height: 65px;
  }
}

@media only screen and (max-width: 767px) {
  .section__title {
    font-size: 45px;
    line-height: 55px;
  }
}

@media (max-width: 575px) {
  .section__title {
    font-size: 35px;
    line-height: 45px;
  }
}

.counter-section-3__wrapper {
  padding-top: 553px;
  border-radius: 25px;
  padding-bottom: 35px;
  position: relative;
}

@media only screen and (max-width: 991px) {
  .counter-section-3__wrapper {
    padding-top: 300px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-section-3__wrapper {
    padding-top: 200px;
  }
}

@media (max-width: 575px) {
  .counter-section-3__wrapper {
    padding-top: 100px;
  }
}

.counter-section-3__wrapper .popup-video {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  border-radius: 500px;
  justify-content: center;
  background: var(--white);
  position: absolute;
  top: -90px;
  right: 267px;
  outline: 30px solid var(--black);
}

@media only screen and (max-width: 767px) {
  .counter-section-3__wrapper .popup-video {
    width: 145px;
    height: 145px;
    outline: 20px solid var(--black);
  }
}

@media only screen and (max-width: 767px) {
  .counter-section-3__wrapper .popup-video {
    width: 90px;
    height: 90px;
    top: -30px;
    right: 125px;
    outline: 10px solid var(--black);
  }
}

@media only screen and (max-width: 767px) {
  .counter-section-3__wrapper .popup-video img {
    max-width: 100px;
  }
}

@media (max-width: 575px) {
  .counter-section-3__wrapper .popup-video img {
    max-width: 50px;
  }
}

.counter-section-3__wrapper .year {
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  color: var(--white);
  text-decoration: underline;
  position: absolute;
  right: 75px;
  top: -90px;
  font-family: var(--font_instr);
}

.counter-section-3__info {
  gap: 35px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.counter-section-3__count {
  max-width: 315px;
  padding: 30px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.counter-section-3__count h2 {
  font-size: 90px;
  font-weight: 600;
  line-height: 90px;
  color: var(--white);
  font-family: var(--font_instr);
}

.counter-section-3__count h2 .odometer.odometer-auto-theme,
.counter-section-3__count h2 .odometer.odometer-theme-default {
  font-family: var(--font_instr);
  line-height: 1;
}

.counter-section-3__count p {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--white);
  font-family: var(--font_kanit);
}

.about-section-3__card {
  padding: 35px;
  border-radius: 10px;
  border: 1px solid var(--black);
  margin-bottom: 30px;
}

@media only screen and (max-width: 1199px) {
  .about-section-3__card {
    padding: 25px;
  }
}

.about-section-3__title {
  display: flex;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--black);
  align-items: center;
  margin-bottom: 130px;
  text-transform: uppercase;
  justify-content: space-between;
  font-family: var(--font_instr);
}

@media (max-width: 575px) {
  .about-section-3__title {
    margin-bottom: 40px;
  }
}

.about-section-3__title a i {
  font-size: 25px;
  line-height: 0.8;
  font-weight: 300;
  color: var(--lime-green);
  transform: rotate(-45deg);
}

.about-section-3__dec {
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  max-width: 495px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .about-section-3__dec {
    font-size: 25px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-section-3__circle {
    display: none;
  }
}

.about-section-3__circle span {
  width: 131px;
  height: 131px;
  display: block;
  background-color: #d9d9d9;
}

.about-section-3__circle span:last-of-type {
  margin-left: 130px;
}

.about-section-3__content {
  gap: 140px;
  display: flex;
  margin-top: 75px;
  align-items: start;
}

@media only screen and (max-width: 1399px) {
  .about-section-3__content {
    gap: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .about-section-3__content {
    margin-bottom: 30px;
    margin-top: 30px;
  }
}

.about-section-3__text {
  font-size: 24px;
  font-weight: 400;
  max-width: 530px;
  line-height: 34px;
  color: var(--black);
  margin-bottom: 32px;
  font-family: var(--font_instr);
}

.about-section-3__thumb {
  border-radius: 10px;
}

.about-section-3__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

.who-we-are-3__top {
  position: relative;
}

.who-we-are-3__top .section-heading__wrap_3 .section__title {
  max-width: 1265px;
}

.who-we-are-3__top .about-section-3__content {
  gap: 609px;
  margin-top: 60px;
}

@media only screen and (max-width: 1399px) {
  .who-we-are-3__top .about-section-3__content {
    gap: 100px;
  }
}

.who-we-are-3__author {
  right: 0;
  top: 100px;
  padding: 30px;
  max-width: 350px;
  position: absolute;
  border-radius: 10px;
  display: inline-block;
  transform: rotate(57.53deg);
  background-color: var(--white);
}

@media only screen and (max-width: 1919px) {
  .who-we-are-3__author {
    top: inherit;
    position: inherit;
    margin-top: 30px;
    transform: rotate(0deg);
  }
}

.who-we-are-3__author-thumb {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}

.who-we-are-3__author-thumb .thumb {
  width: 66px;
  height: 66px;
  margin-left: -32px;
}

.who-we-are-3__author-thumb .thumb:first-of-type {
  margin-left: 0;
}

.who-we-are-3__author-thumb .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 500px;
  border: 1px solid var(--white);
}

.who-we-are-3__author-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--black);
  font-family: var(--font_instr);
}

.who-we-are-3__wrap {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1199px) {
  .who-we-are-3__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .who-we-are-3__wrap {
    grid-template-columns: repeat(1, 1fr);
  }
}

.who-we-are-3__item {
  padding: 45px 30px;
  padding-right: 41px;
  border-radius: 10px;
  display: inline-block;
  background-color: var(--white);
}

.who-we-are-3__title {
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  color: var(--black);
  font-family: var(--font_instr);
}

.who-we-are-3__dec {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #555555;
  max-width: 364px;
  margin-top: 35px;
  margin-bottom: 60px;
  font-family: var(--font_kanit);
}

.who-we-are-3__list ul {
  list-style: none;
}

.who-we-are-3__list ul li {
  gap: 12px;
  display: flex;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  align-items: center;
  margin-bottom: 20px;
  color: var(#555555);
  font-family: var(--font_kanit);
}

.who-we-are-3__list ul li:last-of-type {
  margin-bottom: 0;
}

.who-we-are-3__thumb {
  border-radius: 10px;
}

.who-we-are-3__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog-3__area .section-heading__wrap_3 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid rgba(16, 16, 16, 0.1);
  padding-bottom: 130px;
}

@media only screen and (max-width: 1399px) {
  .blog-3__area .section-heading__wrap_3 {
    flex-wrap: wrap;
    gap: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-3__area .section-heading__wrap_3 {
    padding-bottom: 50px;
  }
}

.blog-3__media {
  position: relative;
  margin-top: 45px;
  height: 867px;
  margin-right: 90px;
}

@media only screen and (max-width: 1399px) {
  .blog-3__media {
    margin-right: 0;
    height: inherit;
  }
}

.blog-3__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog-3__media a {
  font-size: 24px;
  font-weight: 500;
  color: var(--black);
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  line-height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  background: var(--white);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
  .blog-3__media a {
    width: 150px;
    height: 150px;
  }
}

.blog-3__content {
  border-left: 1px solid rgba(16, 16, 16, 0.1);
}

.blog-3__item {
  padding-left: 90px;
  padding-bottom: 45px;
  padding-top: 45px;
  border-bottom: 1px solid rgba(16, 16, 16, 0.1);
}

@media only screen and (max-width: 1399px) {
  .blog-3__item {
    padding-left: 20px;
  }
}

.blog-3__item .meta-date {
  gap: 26px;
  display: flex;
  list-style: none;
  align-items: center;
  margin-bottom: 31px;
}

.blog-3__item .meta-date li {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  position: relative;
  text-transform: uppercase;
  font-family: var(--font_kanit);
}

.blog-3__item .meta-date li:not(:last-child)::before {
  content: "";
  top: 50%;
  width: 6px;
  height: 6px;
  display: flex;
  right: -16px;
  position: absolute;
  align-items: center;
  border-radius: 500px;
  background: var(--black);
  transform: translate(0%, -50%);
}

.blog-3__item .meta-date li span {
  color: #021aee;
}

.blog-3__item .title {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--black);
  text-decoration: underline;
}

@media (max-width: 575px) {
  .blog-3__item .title {
    font-size: 24px;
    line-height: 34px;
  }
}

.results__inner {
  display: grid;
  grid-template-columns: 1089px 1fr;
}

@media only screen and (max-width: 1919px) {
  .results__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .results__inner {
    grid-template-columns: 1fr;
  }
}

.results__media {
  position: relative;
}

.results__media>img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.results__media .popup-video {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  border-radius: 500px;
  justify-content: center;
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
  .results__media .popup-video {
    width: 100px;
    height: 100px;
  }
}

.results__btn {
  width: 391px;
  height: 133px;
  background: var(--black);
  border-radius: 0 10px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575px) {
  .results__btn {
    width: inherit;
    position: inherit;
    bottom: inherit;
  }
}

.results__content {
  margin-left: -1px;
  background: #90ee02;
  padding: 30px 130px 30px 60px;
}

@media (max-width: 575px) {
  .results__content {
    padding: 30px;
  }
}

.results__content .title {
  font-size: 72px;
  font-weight: 500;
  color: var(--black);
  line-height: 82px;
}

@media only screen and (max-width: 767px) {
  .results__content .title {
    font-size: 60px;
    line-height: 70px;
  }

  .results__content .title br {
    display: none;
  }
}

@media (max-width: 575px) {
  .results__content .title {
    font-size: 35px;
    line-height: 45px;
    margin-top: 140px;
  }
}

.results__content .desc {
  font-size: 18px;
  color: var(--black);
  font-weight: 400;
  line-height: 28px;
  max-width: 446px;
  font-family: var(--font_kanit);
}

.results__warpper {
  margin-top: 60px;
}

.results__item {
  width: 370px;
  padding: 30px;
  background: var(--white);
  border-radius: 10px;
}

@media (max-width: 575px) {
  .results__item {
    width: inherit;
  }
}

.results__item:last-child {
  margin-left: 184px;
}

@media only screen and (max-width: 767px) {
  .results__item:last-child {
    margin-left: 0px;
    margin-top: 10px;
  }
}

.results__item .number {
  font-size: 90px;
  font-weight: 600;
  line-height: 90px;
  color: var(--black);
  margin-bottom: 12px;
}

@media (max-width: 575px) {
  .results__item .number {
    font-size: 50px;
    line-height: 50px;
  }
}

.results__item p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--black);
  font-family: var(--font_kanit);
}

.team-3 .section-heading__wrap_3 .section__title {
  max-width: 1235px;
  margin: 0 auto;
  margin-top: 33px;
  margin-bottom: 45px;
  color: var(--white);
}

.team-3 .section-heading__wrap_3 .section__subtitle {
  color: var(--white);
  border: 1px solid rgbA(255 255 255/10%);
}

.team-3__item {
  position: relative;
}

.team-3__item .media {
  overflow: hidden;
  border-radius: 10px;
}

.team-3__item .media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.team-3__item p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--white);
  position: absolute;
  top: 45px;
  left: 35px;
  display: none;
}

.team-3__item .title {
  font-size: 50px;
  font-weight: 500;
  line-height: 50px;
  color: var(--white);
  position: absolute;
  bottom: 45px;
  left: 35px;
  display: none;
}

.team-3__item .title:hover a {
  color: var(--white);
}

.team-3__item ul {
  top: 5%;
  gap: 17px;
  display: flex;
  right: -240px;
  rotate: -90deg;
  list-style: none;
  position: absolute;
  align-items: center;
  transform: translate(-50%, 0%);
  display: none;
}

@media only screen and (max-width: 767px) {
  .team-3__item ul {
    display: none;
  }
}

.team-3__item ul li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 7px 22px;
  color: var(--white);
  border-radius: 500px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font_kanit);
  transition: all 0.3s ease-in-out;
  border: 1px solid #fff;
}

.team-3__item ul li a span {
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 500px;
  display: inline-block;
  transform: translateY(-1px);
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
}

.team-3__item ul li a:hover {
  color: var(--black);
  background-color: var(--white);
}

.team-3__item ul li a:hover span {
  background-color: var(--black);
}

.team-3 .swiper .swiper-wrapper {
  align-items: flex-end;
}

.team-3 .swiper-slide-active {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.5s;
  width: 570px !important;
}

@media only screen and (max-width: 991px) {
  .team-3 .swiper-slide-active {
    width: inherit !important;
  }
}

.team-3 .swiper-slide-active .team-3__item p {
  display: block;
}

.team-3 .swiper-slide-active .team-3__item .title {
  display: block;
}

.team-3 .swiper-slide-active .team-3__item ul {
  display: flex;
}

.brand-3 ul {
  gap: 252px;
  display: flex;
  align-items: center;
  list-style: none;
  width: -moz-fit-content;
  width: fit-content;
}

@media only screen and (max-width: 1399px) {
  .brand-3 ul {
    gap: 200px;
  }
}

@media only screen and (max-width: 1199px) {
  .brand-3 ul {
    gap: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .brand-3 ul {
    gap: 30px;
  }
}

.brand-3 ul li {
  width: 252px;
  height: 180px;
  display: flex;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(217, 217, 217, 0);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 767px) {
  .brand-3 ul li {
    width: 200px;
    height: 110px;
  }
}

.brand-3__slider-1 {
  animation: loop 25s linear infinite;
}

.brand-3__slider-2 {
  animation: loop 25s linear infinite reverse;
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.project-section-3__top {
  margin-bottom: 90px;
}

.project-section-3__top .section-heading__wrap_3 .section__title {
  max-width: 1235px;
  margin: 0 auto;
  margin-top: 33px;
  margin-bottom: 45px;
  color: var(--white);
}

@media (max-width: 575px) {
  .project-section-3__top .section-heading__wrap_3 .section__title {
    font-size: 30px;
    line-height: 40px;
  }
}

.project-section-3__top .section-heading__wrap_3 .section__subtitle {
  color: var(--white);
  border: 1px solid rgbA(255 255 255/10%);
}

.project-section-3__item {
  max-width: 620px;
}

.project-section-3__item:hover .project-section-3__btn {
  transform: translate(-50%, -50%) scale(1);
}

.project-section-3__thumb {
  position: relative;
  transition: all 0.3s;
  border-radius: 10px;
  overflow: hidden;
}

.project-section-3__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.3s;
}

.project-section-3__thumb:hover img {
  transform: scale(1.1);
}

.project-section-3__btn {
  top: 50%;
  left: 50%;
  position: absolute;
  transition: all 0.3s ease-in-out;
  transform: translate(-50%, -50%) scale(0);
}

.project-section-3__btn a {
  width: 190px;
  height: 190px;
  display: flex;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  align-items: center;
  color: var(--black);
  border-radius: 500px;
  justify-content: center;
  background-color: var(--white);
  font-family: var(--font_instr);
}

.project-section-3__pagination {
  display: flex;
  margin-top: 78px;
  align-items: center;
  justify-content: center;
}

.project-section-3__pagination .swiper-pagination-bullet {
  max-width: 280px;
  width: 100%;
  height: 2px;
  opacity: 1;
  border-radius: 0;
  margin: 0 !important;
  transition: all 0.3s ease-in-out;
  background-color: rgba(255, 255, 255, 0.1);
}

.project-section-3__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  height: 4px;
  transform: translateY(1px);
  background-color: var(--lime-green);
}

.testimonial-section-3__bg {
  background-color: #f1f1f1;
}

.testimonial-section-3__top .section-heading__wrap_3 {
  margin-bottom: 90px;
}

.testimonial-section-3__top .section-heading__wrap_3 .section__title {
  max-width: 1165px;
}

.testimonial-section-3__item {
  padding: 45px;
  max-width: 626px;
  position: relative;
  padding-right: 56px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 575px) {
  .testimonial-section-3__item {
    padding: 20px;
  }
}

.testimonial-section-3__dec {
  margin: 45px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  max-width: 525px;
  color: var(--black);
  font-family: var(--font_instr);
}

.testimonial-section-3__author .name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 2px;
  color: var(--black);
  font-family: var(--font_instr);
}

.testimonial-section-3__author .position {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--black);
  font-family: var(--font_kanit);
}

.testimonial-section-3__shape {
  right: 0;
  bottom: 0;
  position: absolute;
}

.service-section-3__top {
  margin-bottom: 90px;
}

@media only screen and (max-width: 1199px) {
  .service-section-3__top {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-3__top {
    margin-bottom: 30px;
  }
}

.service-section-3__top .section-heading__wrap_3 .section__subtitle {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-section-3__item {
  gap: 129px;
  display: flex;
  cursor: pointer;
  padding: 45px 0;
  position: relative;
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.service-section-3__item:hover .service-section-3__thumb {
  transform: scale(1);
}

@media only screen and (max-width: 1399px) {
  .service-section-3__item {
    gap: 70px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-section-3__item {
    gap: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .service-section-3__item {
    gap: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-3__item {
    gap: 15px;
    flex-wrap: wrap;
    padding: 35px 0;
  }
}

@media (max-width: 575px) {
  .service-section-3__item {
    gap: 10px;
    padding: 30px 0;
  }
}

.service-section-3__number span {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
  font-family: var(--font_instr);
}

.service-section-3__title {
  font-size: 50px;
  font-weight: 600;
  line-height: 60px;
  position: relative;
  margin-bottom: 30px;
  color: var(--white);
  max-width: -moz-fit-content;
  max-width: fit-content;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .service-section-3__title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-3__title {
    font-size: 35px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .service-section-3__title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 15px;
  }
}

.service-section-3__title::before {
  content: "";
  width: 0;
  height: 2px;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.3s ease-in-out;
  background-color: var(--red);
}

.service-section-3__title:hover::before {
  width: 100%;
  left: 0;
}

.service-section-3__title:hover a {
  color: var(--red);
}

.service-section-3__list ul {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .service-section-3__list ul {
    gap: 10px;
  }
}

.service-section-3__list ul li {
  gap: 11px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  align-items: center;
  color: var(--white);
  padding: 5px 27.65px;
  display: inline-flex;
  border-radius: 500px;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.service-section-3__list ul li:hover {
  border-color: var(--red);
}

.service-section-3__list ul li a:hover {
  color: var(--red);
}

@media only screen and (max-width: 991px) {
  .service-section-3__list ul li {
    padding: 5px 14px;
  }
}

@media (max-width: 575px) {
  .service-section-3__list ul li {
    font-size: 15px;
  }
}

.service-section-3__list ul li span {
  width: 10px;
  height: 10px;
  border-radius: 500px;
  background-color: var(--white);
}

.service-section-3__thumb {
  right: 0;
  z-index: 1;
  top: -167px;
  position: absolute;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .service-section-3__thumb {
    top: -80px;
    max-width: 300px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-3__thumb {
    top: -15px;
    max-width: 240px;
  }
}

@media (max-width: 575px) {
  .service-section-3__thumb {
    top: 30px;
    max-width: 190px;
  }
}

.service-section-3__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

/* === Intro scss (software) === */
.intro-area4 {
  padding: 113px 0px 0px;
  overflow: hidden;
  border-bottom: 1px solid var(--black);
}

@media only screen and (max-width: 1399px) {
  .intro-area4 {
    padding: 130px 0px 0px;
  }
}

.intro-area4__content {
  padding: 120px 0px 60px;
  position: relative;
  z-index: 5;
}

@media only screen and (max-width: 1399px) {
  .intro-area4__content {
    padding: 43px 0px 60px;
  }
}

.intro-area4__content-subtitle {
  padding: 6px 30px;
  border-radius: 90px;
  border: 1px solid #000;
  background: rgba(16, 16, 16, 0);
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  display: inline-flex;
  margin-bottom: 22px;
}

@media only screen and (max-width: 1399px) {
  .intro-area4__content-subtitle {
    padding: 6px 20px;
    font-size: 18px;
  }
}

.intro-area4__content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 90px;
  font-style: normal;
  font-weight: 700;
  line-height: 111.111%;
  text-transform: capitalize;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1919px) {
  .intro-area4__content-title {
    font-size: 74px;
  }
}

@media only screen and (max-width: 1399px) {
  .intro-area4__content-title {
    font-size: 39px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-title {
    font-size: 33px;
  }
}

.intro-area4__content-items {
  display: flex;
  gap: 30px;
}

@media only screen and (max-width: 1919px) {
  .intro-area4__content-items {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-items {
    flex-wrap: wrap;
  }
}

.intro-area4__content-items-image img {
  width: 134px;
}

.intro-area4__content-items-text {
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  width: 563px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1919px) {
  .intro-area4__content-items-text {
    font-size: 18px;
  }
}

.intro-area4__content-newsletter {
  position: relative;
}

.intro-area4__content-newsletter-box {
  width: 730px;
  position: relative;
  z-index: 5;
}

@media only screen and (max-width: 1919px) {
  .intro-area4__content-newsletter-box {
    width: 645px;
  }
}

@media only screen and (max-width: 1399px) {
  .intro-area4__content-newsletter-box {
    width: 478px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-newsletter-box {
    width: 300px;
  }
}

.intro-area4__content-newsletter-box input {
  width: 100%;
  border-radius: 30px;
  color: #555;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  border-radius: 90px;
  border: 1px solid #fff;
  background: #fff;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
  padding: 13px 20px;
}

@media only screen and (max-width: 1399px) {
  .intro-area4__content-newsletter-box input {
    padding: 13px 18px;
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-newsletter-box input {
    font-size: 15px;
    padding: 13px 15px;
  }
}

.intro-area4__content-newsletter-button {
  position: absolute;
  z-index: 9;
  top: 30%;
  right: 1%;
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-newsletter-button {
    right: 4%;
  }
}

.intro-area4__content-newsletter-button-icon {
  padding: 10px 41px;
  border-radius: 90px;
  background: #febc00;
  transition: animation 0.2s ease-out;
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-newsletter-button-icon {
    padding: 8px 25px;
  }
}

.intro-area4__content-newsletter-button-icon svg {
  width: 38px;
}

@media only screen and (max-width: 767px) {
  .intro-area4__content-newsletter-button-icon svg {
    width: 20px;
  }
}

.intro-area4__content-newsletter-button-icon:hover {
  background-color: #000;
  transition: animation 0.2s ease-out;
}

.intro-area4__content-newsletter-button-icon:hover svg {
  color: #fff;
  filter: brightness(0) saturate(100%) invert(100%) sepia(47%) saturate(202%) hue-rotate(239deg) brightness(111%) contrast(100%);
  transition: animation 0.2s ease-out;
}

.intro-area4__info {
  position: relative;
  margin-right: -2%;
}

.intro-area4__info-thumb {
  position: relative;
  z-index: 9;
  margin-right: -160px;
}

@media only screen and (max-width: 1399px) {
  .intro-area4__info-thumb {
    margin-right: 0;
  }
}

.intro-area4__info-thumb img {
  max-width: 100%;
  max-height: 100%;
}

.intro-area4__info-counter-area {
  padding: 20px 30px;
  position: absolute;
  background: #febc00;
  bottom: 0%;
  left: 0%;
  z-index: 99;
}

@media only screen and (max-width: 1199px) {
  .intro-area4__info-counter-area {
    padding: 15px 20px;
  }
}

.intro-area4__info-counter-area-items h2 {
  color: #000;
  font-family: Kanit;
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: 46px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1199px) {
  .intro-area4__info-counter-area-items h2 {
    font-size: 30px;
    margin-bottom: 6px;
  }
}

.intro-area4__info-counter-area-items-text {
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
}

/* === about-area4 scss (software) === */
.about-area4__items {
  display: flex;
  gap: 120px;
}

@media only screen and (max-width: 1919px) {
  .about-area4__items {
    gap: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area4__items {
    flex-wrap: wrap;
  }
}

.about-area4__items-thumb {
  margin-bottom: 30px;
}

.about-area4__items-thumb img {
  max-width: 100%;
}

.about-area4__content-subtitle {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

@media only screen and (max-width: 1919px) {
  .about-area4__content-subtitle {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area4__content-subtitle {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area4__content-subtitle {
    font-size: 22px;
  }
}

@media only screen and (max-width: 991px) {
  .about-area4__content-subtitle {
    font-size: 18px;
  }
}

/* === About-feature scss (software) === */
.about-feature .tab-content {
  position: relative;
}

.about-feature .tab-content .about-feature__thumb {
  position: relative;
}

.about-feature .tab-content .about-feature__thumb img {
  max-width: 100%;
}

.about-feature .tab-content .about-feature__button {
  position: absolute;
  right: 4%;
  top: 70%;
  z-index: 9;
}

@media only screen and (max-width: 1399px) {
  .about-feature .tab-content .about-feature__button {
    right: 16%;
    top: 70%;
  }
}

.about-feature-tab-header {
  position: relative;
}

.about-feature-tab-header .nav {
  position: relative;
  padding-left: 70px;
  border-left: 2px solid var(--border-color-two);
}

.about-feature-tab-header .nav:not(:last-child) {
  margin-bottom: 38px;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav:not(:last-child) {
    margin-bottom: 28px;
  }
}

.about-feature-tab-header .nav .nav-link {
  position: relative;
  transition: all 0.3s ease-in-out;
  text-align: start;
}

.about-feature-tab-header .nav .nav-link:not(:last-child) {
  margin-bottom: 60px;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav .nav-link:not(:last-child) {
    margin-bottom: 28px;
  }
}

.about-feature-tab-header .nav .nav-link.active {
  position: relative;
  border-radius: 5px;
}

.about-feature-tab-header .nav .nav-link.active::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 173px;
}

.about-feature-tab-header .nav .nav-link.active .title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav .nav-link.active .title {
    font-size: 25px;
    margin-bottom: 14px;
  }
}

@media (max-width: 575px) {
  .about-feature-tab-header .nav .nav-link.active .title {
    font-size: 20px;
    margin-bottom: 13px;
  }
}

.about-feature-tab-header .nav .nav-link.active .subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav .nav-link.active .subtitle {
    font-size: 16px;
  }
}

.about-feature-tab-header .nav .nav-link .title {
  color: #b5b4b4;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 0%;
  margin-bottom: 17px;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav .nav-link .title {
    font-size: 25px;
    margin-bottom: 14px;
  }
}

@media (max-width: 575px) {
  .about-feature-tab-header .nav .nav-link .title {
    font-size: 20px;
    margin-bottom: 13px;
  }
}

.about-feature-tab-header .nav .nav-link .subtitle {
  color: #b5b4b4;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .about-feature-tab-header .nav .nav-link .subtitle {
    font-size: 16px;
  }
}

.about-feature-tab-header .nav .nav-link.active {
  position: relative;
}

.about-feature-tab-header .nav .nav-link.active::before {
  position: absolute;
  top: 0;
  left: -10%;
  z-index: 2;
  content: "";
  width: 2px;
  height: 173px;
  background: #febc00;
}

/* === service-area4 scss (software) === */
.service-area4 {
  padding: 90px 0px 250px;
}

.service-area4 .section-top4 {
  margin-top: 40px;
}

.service-area4 .section-top4__subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  text-transform: uppercase;
}

.service-area4__content {
  margin-top: -30px;
}

.service-area4__content-title1 {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0px 30px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .service-area4__content-title1 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-area4__content-title1 {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .service-area4__content-title1 {
    font-size: 22px;
  }
}

.service-area4__content-title1:hover {
  color: #febc00;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.service-area4__content-title2 {
  color: #fff;
  text-align: right;
  font-family: "Instrument Sans";
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0px 30px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .service-area4__content-title2 {
    font-size: 63px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-area4__content-title2 {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .service-area4__content-title2 {
    text-align: left;
    font-size: 22px;
  }
}

.service-area4__content-title2:hover {
  color: #febc00;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.service-area4__items {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1d1d1d;
  padding: 30px;
}

.service-area4__items-thumb {
  margin-bottom: 30px;
}

.service-area4__items-thumb img {
  border-radius: 10px;
}

.service-area4__items-content-subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 20px;
}

.service-area4__items-content-info li {
  list-style: none;
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

.service-area4__items-content-info li:not(:last-child) {
  margin-bottom: 10px;
}

.service-area4__items-content-info li svg {
  margin-right: 10px;
  width: 17px;
}

/* === project-area4 scss (software) === */
.project-area4 {
  background-color: #e9e8e4;
}

.project-area4__thumb {
  position: relative;
  z-index: 9;
}

.project-area4__thumb img {
  border-radius: 10px;
  max-width: 100%;
}

.project-area4__content {
  display: flex;
  align-items: center;
  margin-top: -70px;
}

@media only screen and (max-width: 1399px) {
  .project-area4__content {
    margin-top: -40px;
  }
}

@media only screen and (max-width: 1199px) {
  .project-area4__content {
    margin-top: -21px;
  }
}

.project-area4__content-text {
  color: rgba(16, 16, 16, 0);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
  font-family: Kanit;
  font-size: 247px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .project-area4__content-text {
    font-size: 193px;
  }
}

@media only screen and (max-width: 1399px) {
  .project-area4__content-text {
    font-size: 139px;
  }
}

@media only screen and (max-width: 1199px) {
  .project-area4__content-text {
    font-size: 139px;
  }
}

@media only screen and (max-width: 991px) {
  .project-area4__content-text {
    font-size: 101px;
  }
}

@media only screen and (max-width: 767px) {
  .project-area4__content-text {
    font-size: 103px;
  }
}

@media (max-width: 575px) {
  .project-area4__content-text {
    font-size: 55px;
  }
}

.project-area4__thumb3 {
  margin-top: -70px;
}

@media only screen and (max-width: 1399px) {
  .project-area4__thumb3 {
    margin-top: -44px;
  }
}

@media only screen and (max-width: 1199px) {
  .project-area4__thumb3 {
    margin-top: -24px;
  }
}

.project-area4__thumb3 img {
  border-radius: 10px;
  max-width: 100%;
}

/* === Wcu-Area scss (software) === */
.wcu-area4-thumb {
  margin-left: -10%;
  border-radius: 20px;
}

.wcu-area4-thumb img {
  border-radius: 20px;
  max-width: 100%;
}

.wcu-area4-content .section-top4 {
  margin-bottom: 50px;
}

@media only screen and (max-width: 1199px) {
  .wcu-area4-content .section-top4 {
    margin-bottom: 20px;
  }
}

.wcu-area4-content .section-top4__subtitle {
  position: relative;
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area4-content .section-top4__subtitle {
    margin-bottom: 14px;
  }
}

@media only screen and (max-width: 1199px) {
  .wcu-area4-content .section-top4__subtitle {
    margin-bottom: 14px;
  }
}

.wcu-area4-content .section-top4__title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

@media only screen and (max-width: 1919px) {
  .wcu-area4-content .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area4-content .section-top4__title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .wcu-area4-content .section-top4__title {
    font-size: 28px;
  }
}

@media only screen and (max-width: 767px) {
  .wcu-area4-content .section-top4__title {
    font-size: 25px;
  }
}

.wcu-area4-content .section-top4__text {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  max-width: 610px;
}

.wcu-area4-content__items-info {
  display: flex;
  align-items: center;
  gap: 25px;
}

.wcu-area4-content__items-info:not(:last-child) {
  margin-bottom: 25px;
}

.wcu-area4-content__items-info__icon svg {
  width: 70px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area4-content__items-info__icon svg {
    width: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area4-content__items-info__icon svg {
    width: 50px;
  }
}

.wcu-area4-content__items-info-content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 133.333%;
  margin-bottom: 14px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area4-content__items-info-content-title {
    font-size: 25px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .wcu-area4-content__items-info-content-title {
    font-size: 20px;
  }
}

.wcu-area4-content__items-info-content-desc {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  max-width: 524px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area4-content__items-info-content-desc {
    font-size: 16px;
    max-width: 500px;
  }
}

/* === Brand scss (software) === */
.brand-area4__image {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  margin: 0 auto;
}

.brand-area4__image img {
  max-width: 100%;
}

/* === Testimonial-area scss (software) === */
.testimonial-area4 {
  position: relative;
  background-color: #e9e8e4;
}

.testimonial-area4 .section-top4__subtitle {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4 .section-top4__subtitle {
    font-size: 15px;
    line-height: 20px;
  }
}

.testimonial-area4 .section-top4__title {
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0%;
  text-align: center;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area4 .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4 .section-top4__title {
    font-size: 30px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4 .section-top4__title {
    font-size: 25px;
    line-height: 40px;
  }
}

.testimonial-area4__card {
  position: relative;
  padding: 75px 90px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  gap: 90px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area4__card {
    padding: 55px 50px;
    gap: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__card {
    padding: 35px 30px;
    gap: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4__card {
    padding: 35px 30px;
    gap: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__card {
    padding: 30px 25px;
    gap: 10px;
  }
}

@media (max-width: 575px) {
  .testimonial-area4__card {
    flex-wrap: wrap;
    gap: 10px;
  }
}

.testimonial-area4__card .video-box .video-buttton {
  width: 244px;
  height: 244px;
  flex-shrink: 0;
  line-height: 244px;
  text-align: center;
  border-radius: 50%;
  background-color: transparent;
  display: inline-block;
  z-index: 6;
  font-size: 24px;
  position: relative;
  z-index: 9;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__card .video-box .video-buttton {
    width: 144px;
    height: 144px;
    line-height: 144px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__card .video-box .video-buttton {
    width: 200px;
    height: 200px;
    line-height: 200px;
  }
}

.testimonial-area4__card .video-box .video-buttton .arrow-button {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 274px;
  height: 274px;
  flex-shrink: 0;
  line-height: 274px;
  text-align: center;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__card .video-box .video-buttton .arrow-button {
    width: 140px;
    height: 140px;
    line-height: 140px;
    top: 10%;
    left: 10%;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__card .video-box .video-buttton .arrow-button {
    width: 70px;
    height: 70px;
    line-height: 70px;
    top: 24%;
    left: 20%;
  }
}

.testimonial-area4__card .video-box .video-buttton .text-circle {
  position: absolute;
  top: 5%;
  left: 4%;
  animation: cir36 10s linear infinite;
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__card .video-box .video-buttton .text-circle {
    top: 16%;
    left: 8%;
    width: 105px;
  }
}

.testimonial-area4__card-items-icon {
  margin-bottom: 28px;
}

.testimonial-area4__card-items-content-subtitle {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 153.846%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 10px;
  width: 800px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area4__card-items-content-subtitle {
    width: 600px;
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__card-items-content-subtitle {
    width: 600px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4__card-items-content-subtitle {
    width: 500px;
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-area4__card-items-content-subtitle {
    width: 500px;
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .testimonial-area4__card-items-content-subtitle {
    width: 250px;
    font-size: 16px;
  }
}

.testimonial-area4__card-items-mentor-items {
  display: flex;
}

.testimonial-area4__card-items-mentor-items-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.testimonial-area4__card-items-mentor-items-info-thumb img {
  max-width: 100%;
}

.testimonial-area4__card-items-mentor-items-info-content-title {
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__card-items-mentor-items-info-content-title {
    font-size: 18px;
  }
}

.testimonial-area4__card-items-mentor-items-info-content-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
}

.testimonial-area4__controls {
  position: absolute;
  top: 76%;
  left: 60%;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 99;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__controls {
    bottom: 1%;
    left: 50%;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4__controls {
    display: none;
  }
}

.testimonial-area4__controls-arrowRight {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 60px;
  border-radius: 60px;
  background: #000;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__controls-arrowRight {
    width: 50px;
    height: 50px;
  }
}

.testimonial-area4__controls-arrowRight:hover {
  background: #febc00;
  border: 1px solid #febc00;
}

.testimonial-area4__controls-arrowLeft {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #febc00;
  border-radius: 60px;
  border-radius: 60px;
  background: #febc00;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 991px) {
  .testimonial-area4__controls-arrowLeft {
    width: 50px;
    height: 50px;
  }
}

.testimonial-area4__controls-arrowLeft:hover {
  background: #000;
  border: 1px solid #000;
}

.testimonial-area4__controls-arrowLeft:hover svg {
  color: #fff;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(44deg) brightness(100%) contrast(105%);
}

.testimonial-area4__content {
  padding: 60px 40px;
  border-radius: 10px;
  background: #febc00;
  text-align: center;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area4__content {
    padding: 43px 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__content {
    padding: 43px 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4__content {
    padding: 39px 25px;
  }
}

.testimonial-area4__content-title {
  color: #000;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 127.778%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin-bottom: 70px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area4__content-title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area4__content-title {
    font-size: 25px;
    margin-bottom: 70px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area4__content-title {
    font-size: 22px;
    margin-bottom: 50px;
  }
}

.testimonial-area4__content-thumb {
  margin-bottom: 30px;
}

.testimonial-area4__content-thumb img {
  max-width: 100%;
}

.testimonial-area4__content-subtitle {
  color: #000;
  text-align: center;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

/* === Video scss (software) === */
.video-area4 {
  padding: 120px 0px 200px;
}

@media only screen and (max-width: 1399px) {
  .video-area4 {
    padding: 110px 0px 120px;
  }
}

@media only screen and (max-width: 991px) {
  .video-area4 {
    padding: 100px 0px 120px;
  }
}

.video-area4__items-title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  width: 885px;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1919px) {
  .video-area4__items-title {
    font-size: 44px;
    width: 868px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .video-area4__items-title {
    font-size: 32px;
    width: 672px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .video-area4__items-title {
    font-size: 20px;
    width: 100%;
    margin-bottom: 37px;
  }
}

.video-area4__items-thumb {
  display: flex;
  justify-content: end;
  text-align: end;
  border-radius: 10px;
}

@media only screen and (max-width: 1199px) {
  .video-area4__items-thumb {
    justify-items: center;
    justify-content: center;
    text-align: center;
  }
}

.video-area4__items-thumb img {
  border-radius: 10px;
  max-width: 100%;
}

.video-area4-info__counter:not(:last-child) {
  margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
  .video-area4-info__counter:not(:last-child) {
    margin-bottom: 30px;
  }
}

.video-area4-info__counter-title {
  color: #febc00;
  font-family: "Instrument Sans";
  font-size: 90px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 13px;
}

@media only screen and (max-width: 1919px) {
  .video-area4-info__counter-title {
    font-size: 71px;
  }
}

@media only screen and (max-width: 1399px) {
  .video-area4-info__counter-title {
    font-size: 57px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-area4-info__counter-title {
    font-size: 50px;
  }
}

.video-area4-info__counter-text {
  color: #fff;
  font-family: Kanit;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media only screen and (max-width: 1919px) {
  .video-area4-info__counter-text {
    font-size: 18px;
  }
}

@media only screen and (max-width: 1399px) {
  .video-area4-info__counter-text {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-area4-info__counter-text {
    font-size: 15px;
  }
}

.video-area4__content {
  margin-top: 60px;
}

@media only screen and (max-width: 991px) {
  .video-area4__content {
    margin-top: 40px;
  }
}

.video-area4__content-title {
  color: #febc00;
  font-family: Kanit;
  font-size: 239px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .video-area4__content-title {
    font-size: 190px;
  }
}

@media only screen and (max-width: 1399px) {
  .video-area4__content-title {
    font-size: 134px;
  }
}

@media only screen and (max-width: 1199px) {
  .video-area4__content-title {
    font-size: 134px;
  }
}

@media only screen and (max-width: 991px) {
  .video-area4__content-title {
    font-size: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .video-area4__content-title {
    max-width: 100%;
    font-size: 100px;
  }
}

@media (max-width: 575px) {
  .video-area4__content-title {
    max-width: 100%;
    font-size: 47px;
  }
}

/* === wp-area scss (software) === */
.wp-area4 {
  background-color: #e9e8e4;
}

.wp-area4 .section-top4__subtitle {
  color: #000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.wp-area4 .section-top4__title {
  color: #000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  font-family: "Instrument Sans";
  font-size: 46px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 35px;
}

@media only screen and (max-width: 1919px) {
  .wp-area4 .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .wp-area4 .section-top4__title {
    font-size: 27px;
  }
}

@media only screen and (max-width: 1199px) {
  .wp-area4 .section-top4__title {
    font-size: 25px;
  }
}

@media only screen and (max-width: 991px) {
  .wp-area4 .section-top4__title {
    font-size: 21px;
  }
}

.wp-area4 .section-top4__text {
  color: #555;
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

@media only screen and (max-width: 1919px) {
  .wp-area4 .section-top4__text {
    font-size: 17px;
  }
}

@media only screen and (max-width: 1399px) {
  .wp-area4 .section-top4__text {
    font-size: 15px;
  }
}

.wp-area4-wrapper {
  padding: 50px;
  background-color: #fff;
  border-radius: 5px;
}

@media only screen and (max-width: 1399px) {
  .wp-area4-wrapper {
    padding: 40px;
  }
}

.wp-area4-wrapper__progress-wrap-pro-items:not(:last-child) {
  margin-bottom: 30px;
}

.wp-area4-wrapper__progress-wrap-pro-items .pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wp-area4-wrapper__progress-wrap-pro-items .pro-head .title {
  color: var(--black);
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .wp-area4-wrapper__progress-wrap-pro-items .pro-head .title {
    font-size: 16px;
  }
}

.wp-area4-wrapper__progress-wrap-pro-items .pro-head .point {
  text-transform: capitalize;
  color: #000;
  text-align: right;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 1399px) {
  .wp-area4-wrapper__progress-wrap-pro-items .pro-head .point {
    font-size: 16px;
  }
}

.wp-area4-wrapper__progress-wrap-pro-items .progress {
  border-radius: 90px;
  border: 1px solid #000;
  background: #e9e8e4;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  display: flex;
  height: 10px;
  width: 100%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .wp-area4-wrapper__progress-wrap-pro-items .progress {
    margin-bottom: 16px;
  }
}

.wp-area4-wrapper__progress-wrap-pro-items .progress-value {
  animation: load 3s normal forwards;
  border-radius: 90px;
  border: 1px solid #000;
  background: #febc00;
  height: 10px;
  width: 0;
}

.wp-area4-wrapper__progress-wrap-pro-items .style-one {
  animation: load1 3s normal forwards;
}

.wp-area4-wrapper__progress-wrap-pro-items .style-three {
  animation: load3 3s normal forwards;
}

.wp-area4-wrapper__progress-wrap-pro-items .style-four {
  animation: load4 3s normal forwards;
}

.wp-area4-wrapper__progress-wrap-pro-items .style-five {
  animation: load5 3s normal forwards;
}

@keyframes load1 {
  0% {
    width: 0;
  }

  100% {
    width: 93%;
  }
}

@keyframes load3 {
  0% {
    width: 0;
  }

  100% {
    width: 90%;
  }
}

@keyframes load4 {
  0% {
    width: 0;
  }

  100% {
    width: 87%;
  }
}

@keyframes load5 {
  0% {
    width: 0;
  }

  100% {
    width: 60%;
  }
}

.wp-area4__items {
  position: relative;
  max-width: 100%;
  height: 100%;
}

.wp-area4__items-thumb {
  max-width: 100%;
  height: 100%;
}

.wp-area4__items-thumb img {
  max-width: 100%;
  height: 100%;
}

.wp-area4__items .rr-btn-button4 {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 1;
}

/* === Pricing scss (software) === */
.pricing-area4 .section-top4__subtitle {
  text-align: center;
}

.pricing-area4 .section-top4__title {
  color: #000;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4 .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .pricing-area4 .section-top4__title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing-area4 .section-top4__title {
    font-size: 26px;
  }
}

.pricing-area4__items {
  position: relative;
  padding: 40px;
  border-radius: 10px;
  background-color: #000;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4__items {
    padding: 20px 20px;
  }
}

.pricing-area4__items-header {
  padding: 30px 20px;
  border-radius: 10px;
  border: 1px dashed #000;
  background: #fff;
  text-align: center;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4__items-header {
    padding: 20px 15px;
  }
}

.pricing-area4__items-header-subtitle {
  color: #000;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.pricing-area4__items-header-title {
  color: #000;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  line-height: 114.286%;
  margin-top: 10px;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4__items-header-title {
    font-size: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .pricing-area4__items-header-title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing-area4__items-header-title {
    font-size: 30px;
    margin-top: 0px;
  }
}

.pricing-area4__items-header-title sub {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 80px;
}

.pricing-area4__items-info-list li {
  padding: 10px 0px 14px 130px;
  display: block;
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  text-transform: lowercase;
  list-style: none;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4__items-info-list li {
    padding: 10px 0px 14px 10px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing-area4__items-info-list li {
    font-size: 17px;
  }
}

.pricing-area4__items-info-list li:not(:last-child) {
  border-bottom: 1px dashed #fff;
}

.pricing-area4__items-info-list li .icon svg {
  width: 20px;
}

.pricing-area4__items-button-pricing-btn {
  display: inline-block;
  background-color: transparent;
  color: #fff;
  display: inline-block;
  font-family: Kanit;
  font-size: 18px;
  font-weight: 500;
  padding: 14px 100px;
  border-radius: 0;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  position: relative;
  line-height: 1;
  width: 100%;
  border-radius: 96px;
  border: 1px dashed #fff;
  text-align: center;
  line-height: 155.556%;
}

@media only screen and (max-width: 1919px) {
  .pricing-area4__items-button-pricing-btn {
    padding: 14px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .pricing-area4__items-button-pricing-btn {
    font-size: 16px;
  }
}

.pricing-area4__items-button-pricing-btn:hover {
  background-color: #fff;
  color: #000;
}

.pricing-area4__items.active {
  background-color: #febc00;
  transition: all 0.4s ease-in-out;
}

.pricing-area4__items.active-info-list li {
  color: #000 !important;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
}

.pricing-area4__items.active-info-list li:not(:last-child) {
  border-bottom: 1px dashed #fff;
}

.pricing-area4__items.active-info-list li .icon svg {
  width: 20px;
}

.pricing-area4__items.active-button-pricing-btn {
  display: inline-block;
  background: #fff;
  color: #fff;
  display: inline-block;
  font-family: Kanit;
  font-size: 18px;
  font-weight: 500;
  padding: 14px 100px;
  border-radius: 0;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  position: relative;
  line-height: 1;
  width: 100%;
  border-radius: 96px;
  border: 1px dashed #fff;
  text-align: center;
  line-height: 155.556%;
}

.pricing-area4__items.active-button-pricing-btn:hover {
  background-color: #000;
  color: #000;
}

.pricing-area4__items:hover {
  transform: translateY(-10px);
  border-color: transparent;
}

/* === Blog scss (software) === */
.blog-area4 {
  background: #e9e8e4;
}

.blog-area4 .section-top4__title {
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1919px) {
  .blog-area4 .section-top4__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area4 .section-top4__title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area4 .section-top4__title {
    font-size: 22px;
    line-height: 30px;
  }
}

.blog-area4__button {
  display: flex;
  justify-content: end;
}

@media only screen and (max-width: 1399px) {
  .blog-area4__button {
    flex-wrap: wrap;
    justify-content: start;
    margin-top: -60px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area4__button {
    margin-top: -60px;
    margin-bottom: 30px;
  }
}

.blog-area4__card {
  display: flex;
  align-items: end;
}

@media (max-width: 575px) {
  .blog-area4__card {
    flex-wrap: wrap;
  }
}

.blog-area4__card-content {
  padding: 60px 30px 20px;
  border-radius: 10px;
  background: #fff;
}

@media only screen and (max-width: 1399px) {
  .blog-area4__card-content {
    padding: 40px 20px 20px;
  }
}

.blog-area4__card-content-list {
  display: flex;
  gap: 13px;
  margin-bottom: 30px;
}

.blog-area4__card-content-list li {
  list-style: none;
}

.blog-area4__card-content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 127.778%;
  width: 421px;
  margin-bottom: 38px;
}

@media only screen and (max-width: 1919px) {
  .blog-area4__card-content-title {
    margin-bottom: 25px;
    font-size: 26px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area4__card-content-title {
    width: 321px;
    font-size: 20px;
  }
}

@media (max-width: 575px) {
  .blog-area4__card-content-title {
    font-size: 20px;
    width: 271px;
  }
}

.blog-area4__card-content-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  width: 421px;
  margin-bottom: 108px;
}

@media only screen and (max-width: 1919px) {
  .blog-area4__card-content-subtitle {
    margin-bottom: 100px;
    font-size: 17px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area4__card-content-subtitle {
    margin-bottom: 100px;
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .blog-area4__card-content-subtitle {
    width: 271px;
  }
}

.blog-area4__card-content-link {
  border-radius: 90px;
  background: #000;
  width: 56px;
  height: 56px;
  line-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #000;
  transition: all 0.4s ease-in-out;
}

.blog-area4__card-content-link svg {
  width: 24px;
}

@media only screen and (max-width: 1399px) {
  .blog-area4__card-content-link {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

.blog-area4__card-thumb img {
  border-radius: 10px;
  max-width: 100%;
}

.blog-area4-wrapper-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 99;
  margin-top: 50px;
}

.blog-area4-wrapper-controls__arrowRight {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 60px;
  border-radius: 60px;
  background: #000;
  transition: all 0.4s ease-in-out;
}

.blog-area4-wrapper-controls__arrowRight svg {
  width: 20px;
}

@media only screen and (max-width: 1199px) {
  .blog-area4-wrapper-controls__arrowRight {
    width: 40px;
    height: 40px;
  }
}

.blog-area4-wrapper-controls__arrowRight:hover {
  background: #febc00;
  border: 1px solid #febc00;
}

.blog-area4-wrapper-controls__arrowLeft {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #febc00;
  border-radius: 60px;
  border-radius: 60px;
  background: #febc00;
  transition: all 0.4s ease-in-out;
}

.blog-area4-wrapper-controls__arrowLeft svg {
  width: 20px;
}

@media only screen and (max-width: 1199px) {
  .blog-area4-wrapper-controls__arrowLeft {
    width: 40px;
    height: 40px;
  }
}

.blog-area4-wrapper-controls__arrowLeft:hover {
  background: #000;
  border: 1px solid #000;
}

.blog-area4-wrapper-controls__arrowLeft:hover svg {
  color: #fff;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(44deg) brightness(100%) contrast(105%);
}

/* === Marque scss (software) === */
.marque-section4 {
  padding: 90px 0px 100px;
  border-radius: 30px 30px 0 0;
  background: var(--black);
  position: relative;
  white-space: nowrap;
  z-index: 9;
}

@media only screen and (max-width: 1919px) {
  .marque-section4 {
    padding: 60px 0px 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .marque-section4 {
    padding: 40px 0px 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .marque-section4 {
    padding: 20px 0px 50px;
  }
}

.text-slider-1 {
  height: 100px;
  color: #febc00;
  font-family: "Instrument Sans";
  font-size: 90px;
  font-style: normal;
  text-align: center;
  font-weight: 700;
  line-height: 111.111%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .text-slider-1 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .text-slider-1 {
    font-size: 50px;
  }
}

.text-slider-1:not(:last-child) {
  margin-right: 30px;
}

.text-slider-1 img {
  margin-bottom: 10px;
  margin-right: -20px;
}

.text-slider-2 {
  height: 100px;
  color: #fff;
  font-family: "Instrument Sans";
  text-align: center;
  font-size: 90px;
  font-style: normal;
  font-weight: 700;
  line-height: 100px;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .text-slider-2 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .text-slider-2 {
    font-size: 50px;
  }
}

.text-slider-2:not(:last-child) {
  margin-right: 30px;
}

.text-slider-2 img {
  margin-bottom: 10px;
  margin-right: -20px;
}

.marquee-inner {
  position: absolute;
  display: flex;
  width: max-content;
}

.marquee-list {
  display: flex;
  flex-shrink: 0;
}

.marquee-item {
  display: flex;
  transition: animation 0.2s ease-out;
}

.marquee-inner.to-left {
  animation: marqueeLeft 200s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee-inner.to-right {
  animation: marqueeRight 200s linear infinite;
}

@keyframes marqueeRight {
  0% {
    right: 0;
  }

  100% {
    right: -100%;
  }
}

/* === footer scss (software) === */
.footer-area4 {
  background: var(--black);
}

.footer-area4-main {
  padding: 80px 0px;
}

@media only screen and (max-width: 1919px) {
  .footer-area4-main {
    padding: 30px 0px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area4-main {
    padding: 20px 0px;
  }
}

.footer-area4-widget__title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .footer-area4-widget__title {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area4-widget__title {
    font-size: 20px;
  }
}

.footer-area4-widget__text {
  width: 393px;
  color: #999;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1199px) {
  .footer-area4-widget__text {
    font-size: 16px;
    width: 322px;
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-area4-widget__text {
    font-size: 16px;
    width: 286px;
    margin-bottom: 15px;
  }
}

.footer-area4-widget__social-link {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-area4-widget__social-link span {
  width: 46.386px;
  height: 46.386px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  border-radius: 36px;
  background: transparent;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border: 1px solid var(--white);
}

.footer-area4-widget__social-link span:hover {
  border: none;
  background: #febc00;
  color: var(--black);
}

.footer-area4-widget__nav-link {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 250%;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .footer-area4-widget__nav-link {
    font-size: 14px;
  }
}

.footer-area4-widget__nav-link:hover {
  color: #ff6e00;
}

.footer-area4-widget__contact-link {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
  line-height: 187.5%;
  transition: all 0.4s ease-in-out;
}

.footer-area4-widget__contact-link:hover {
  color: #ff6e00;
}

.footer-area4-widget__newsletter-box {
  width: 448px;
  position: relative;
  z-index: 5;
}

@media only screen and (max-width: 1199px) {
  .footer-area4-widget__newsletter-box {
    width: 332px;
  }
}

@media (max-width: 575px) {
  .footer-area4-widget__newsletter-box {
    width: 284px;
  }
}

.footer-area4-widget__newsletter-box input {
  width: 100%;
  border-radius: 30px;
  color: #999;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  border-radius: 90px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  padding: 14px 20px;
  width: 100%;
  border: 0;
}

@media only screen and (max-width: 1199px) {
  .footer-area4-widget__newsletter-box input {
    padding: 12px 15px;
    font-size: 16px;
  }
}

.footer-area4-bottom__wrapper {
  padding: 60px 0 35px;
}

@media only screen and (max-width: 1919px) {
  .footer-area4-bottom__wrapper {
    padding: 30px 0 25px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area4-bottom__wrapper {
    padding: 20px 0 20px;
  }
}

.footer-area4-bottom__copyright {
  text-align: center;
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 1199px) {
  .footer-area4-bottom__copyright {
    font-size: 16px;
  }
}

/* Split text styling */
.rr-title-anim-2 {
  /* ensure inline-block so translateX doesn't collapse line-height */
  display: inline-block;
  /* words get small gap */
}

.rr-title-anim-2 .rr-word {
  display: inline-block;
  white-space: nowrap;
  /* keep characters in the same word on one line */
  margin-right: 0.35ch;
}

.rr-title-anim-2 .rr-word .rr-char {
  display: inline-block;
  white-space: pre;
  /* preserve spaces inside char if needed */
  transform-origin: left center;
  /* prevent selection flash on some browsers */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.hero-section-5 {
  z-index: 2;
  background: linear-gradient(180deg, #f3ff0a 0%, rgba(255, 255, 255, 0) 100%);
  overflow: hidden;
}

.hero-section-5__wrapper {
  padding-top: 205px;
  padding-bottom: 900px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 1921px) {
  .hero-section-5__wrapper {
    padding-bottom: 1750px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__wrapper {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__wrapper {
    padding-top: 140px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__wrapper {
    padding-bottom: 70px;
  }
}

.hero-section-5__wrap {
  display: flex;
  position: relative;
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__wrap {
    display: inherit;
  }
}

.hero-section-5__subtitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  color: var(--black);
  text-decoration: underline;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .hero-section-5__subtitle {
    font-size: 20px;
  }
}

.hero-section-5__title {
  font-size: 100px;
  font-weight: 500;
  line-height: 110px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__title br {
    display: none;
  }
}

@media only screen and (max-width: 1919px) {
  .hero-section-5__title {
    font-size: 70px;
    line-height: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__title {
    font-size: 70px;
    line-height: 80px;
  }
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 767px) {
  .hero-section-5__title {
    font-size: 50px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-5__title {
    font-size: 40px;
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__title {
    font-size: 27px;
  }
}

.hero-section-5__title strong {
  font-size: 100px;
  font-weight: 700;
  line-height: 110px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1919px) {
  .hero-section-5__title strong {
    font-size: 70px;
    line-height: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__title strong {
    font-size: 70px;
    line-height: 86px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__title strong {
    font-size: 50px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-5__title strong {
    font-size: 40px;
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__title strong {
    font-size: 27px;
    line-height: 29px;
  }
}

.hero-section-5__title img {
  margin-left: 10px;
  border-radius: 100px;
  background: var(--black);
  padding: 19px 39px 18px 39px;
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__title img {
    padding: 14px 39px 14px 39px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-5__title img {
    padding: 10px 20px 10px 20px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__title img {
    padding: 7px 15px 7px 15px;
  }
}

.hero-section-5__thumb {
  right: 75px;
  bottom: 0;
  display: flex;
  position: absolute;
  align-items: end;
  flex-direction: column;
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__thumb {
    right: 5px;
    left: 5px;
  }
}

.hero-section-5__thumb .circle-shape {
  margin-bottom: 116px;
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__thumb .circle-shape {
    max-width: 120px;
    margin-bottom: 30px;
  }
}

.hero-section-5__thumb .zoom-thumb {
  position: relative;
  z-index: 99;
  max-width: 500px;
  height: 287px;
  border-radius: 4px;
  -o-object-fit: cover;
  object-fit: cover;
  margin-bottom: 116px;
}

@media only screen and (max-width: 1919px) {
  .hero-section-5__thumb .zoom-thumb {
    margin-bottom: 57px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__thumb .zoom-thumb {
    max-width: 300px;
  }
}

.hero-section-5__thumb .zoom-thumb:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__thumb {
    position: inherit;
    padding-top: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-5__thumb {
    padding-top: 50px;
  }
}

.hero-section-5__thumb a {
  bottom: 55px;
  left: -97px;
  font-size: 15px;
  transform: rotate(91deg);
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  position: absolute;
  color: var(--black);
  text-transform: uppercase;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__thumb a {
    bottom: 77px;
    left: -90px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-section-5__thumb a {
    bottom: 107px;
    left: 147px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-5__thumb a {
    bottom: 107px;
    left: -30px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__thumb a {
    position: inherit;
    transform: inherit;
    bottom: 10px;
    left: 0;
  }
}

.hero-section-5__thumb a i {
  font-size: 24px;
  margin-left: 10px;
}

.hero-section-5__btn {
  margin: 54px 0 72px 0;
}

@media only screen and (max-width: 991px) {
  .hero-section-5__btn {
    margin: 30px 0 50px 0;
  }
}

.hero-section-5__btn .btn-black {
  padding: 19px 54px;
  color: var(--white);
}

@media only screen and (max-width: 1199px) {
  .hero-section-5__btn .btn-black {
    padding: 12px 30px;
  }
}

.hero-section-5__rating {
  gap: 44px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__rating {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__rating {
    flex-wrap: wrap;
  }
}

.hero-section-5__rating-box {
  padding-right: 43px;
  border-right: 1px solid var(--black);
}

@media only screen and (max-width: 1399px) {
  .hero-section-5__rating-box {
    padding-right: 20px;
  }
}

.hero-section-5__rating-box .score {
  font-weight: 700;
  font-size: 100px;
  line-height: 90px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 767px) {
  .hero-section-5__rating-box .score {
    font-size: 70px;
    line-height: 38px;
  }
}

@media (max-width: 575px) {
  .hero-section-5__rating-box .score {
    font-size: 60px;
    line-height: 40px;
  }
}

.hero-section-5__rating-box .rating-star {
  gap: 5px;
  display: flex;
  margin-top: 30px;
  align-items: center;
}

.hero-section-5__rating-box .rating-star li {
  list-style: none;
}

.hero-section-5__rating-box .rating-star i {
  font-size: 20px;
  color: #ff8800;
}

.hero-section-5__author {
  gap: 20px;
  display: flex;
}

@media (max-width: 575px) {
  .hero-section-5__author {
    flex-wrap: wrap;
  }
}

.hero-section-5__author .name {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: var(--black);
  margin-bottom: 9px;
  font-family: var(--font_kanit);
}

.hero-section-5__author .desg {
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  color: var(--black);
  margin-bottom: 22px;
  font-family: var(--font_kanit);
}

.hero-section-5__author .desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--black);
  max-width: 359px;
  font-family: var(--font_kanit);
}

.service-section-5__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--yellow);
  padding: 14px 0 60px 0;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  border-top: 1px solid var(--yellow);
}

.service-section-5__wrapper .accordion-item {
  gap: 300px;
  border: none;
  display: grid;
  margin-bottom: 50px;
  background: inherit;
  grid-template-columns: repeat(2, 196px 1353px);
}

.service-section-5__wrapper .accordion-item:has(.accordion-collapse.show) .accordion-number {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-item {
    gap: 30px;
    grid-template-columns: repeat(2, 174px 1084px);
  }
}

@media only screen and (max-width: 1199px) {
  .service-section-5__wrapper .accordion-item {
    grid-template-columns: repeat(2, 174px 851px);
  }
}

@media only screen and (max-width: 991px) {
  .service-section-5__wrapper .accordion-item {
    grid-template-columns: repeat(2, 140px 642px);
  }
}

@media only screen and (max-width: 767px) {
  .service-section-5__wrapper .accordion-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-item {
    margin-bottom: 50px;
  }
}

.service-section-5__wrapper .accordion-content {
  width: 95%;
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-content {
    width: 90%;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-5__wrapper .accordion-content {
    width: 100%;
  }
}

.service-section-5__wrapper .accordion-number {
  opacity: 0;
  font-size: 350px;
  font-weight: 500;
  letter-spacing: 0;
  visibility: hidden;
  line-height: 250px;
  color: var(--yellow);
  font-family: var(--font_instr);
  transform: translateY(20px);
  transition: all 0.5s ease;
  pointer-events: none;
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-number {
    font-size: 250px;
    line-height: 190px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-5__wrapper .accordion-number {
    font-size: 195px;
    line-height: 140px;
  }
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-number {
    font-size: 80px;
    line-height: 25px;
  }
}

.service-section-5__wrapper .accordion-button {
  outline: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0;
  box-shadow: none;
  color: var(--white);
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 50px;
  background: transparent;
  font-family: var(--font_instr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .service-section-5__wrapper .accordion-button {
    font-size: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .service-section-5__wrapper .accordion-button {
    line-height: 22px;
  }
}

@media only screen and (max-width: 767px) {
  .service-section-5__wrapper .accordion-button {
    line-height: 17px;
  }
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-button {
    font-size: 17px;
    padding-bottom: 10px;
  }
}

.service-section-5__wrapper .accordion-button span {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 46px;
  color: var(--white);
  padding-left: 5px;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 767px) {
  .service-section-5__wrapper .accordion-button span {
    font-size: 18px;
  }
}

.service-section-5__wrapper .accordion-button::after {
  content: "+";
  font-size: 26px;
  font-weight: 400;
  margin-left: auto;
  transform: inherit;
  color: var(--yellow);
  display: inline-block;
  transition: all 0.3s ease;
  background-image: none !important;
}

.service-section-5__wrapper .accordion-button:not(.collapsed)::after {
  content: "-";
  color: var(--yellow);
}

.service-section-5__wrapper .accordion-button:not(.collapsed) {
  outline: 0;
  box-shadow: inherit;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--yellow);
  background-color: transparent;
}

.service-section-5__wrapper .accordion-button:not(.collapsed) span {
  color: var(--yellow);
}

.service-section-5__wrapper .accordion-button button:focus:not(:focus-visible) {
  outline: inherit;
  border-color: none;
}

.service-section-5__wrapper .accordion-button.accordion-button:focus {
  z-index: 3;
  border-color: inherit;
  outline: 0;
  box-shadow: inherit;
}

.service-section-5__wrapper .accordion-collapse.show {
  border-bottom: 1px solid var(--yellow);
}

.service-section-5__wrapper .accordion-body {
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 28px;
  letter-spacing: 0;
  max-width: 537px;
  padding: 29px 0 22px 0;
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-body {
    padding: 20px 0 22px 0;
  }
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-body {
    font-size: 16px;
    line-height: 24px;
  }
}

.service-section-5__wrapper .accordion-list {
  gap: 15px;
  display: flex;
  margin-bottom: 59px;
  align-items: center;
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-list {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-section-5__wrapper .accordion-list {
    flex-wrap: wrap;
  }
}

.service-section-5__wrapper .accordion-list li {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  color: var(--white);
  padding: 10px 35px;
  list-style: none;
  position: relative;
  border-radius: 40px;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 1399px) {
  .service-section-5__wrapper .accordion-list li {
    font-size: 15px;
  }
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-list li {
    line-height: 15px;
  }
}

.service-section-5__wrapper .accordion-list li::before {
  content: "";
  top: 16px;
  left: 14px;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 100%;
  background: var(--white);
}

@media (max-width: 575px) {
  .service-section-5__wrapper .accordion-list li::before {
    top: 12px;
  }
}

.fact-5__wrapper {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.fact-5__wrapper::before {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.fact-5__wrap {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 767px) {
  .fact-5__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .fact-5__wrap {
    grid-template-columns: 1fr;
  }
}

.fact-5__item {
  z-index: 3;
  position: relative;
  padding: 535px 50px 70px 50px;
  transition: all 0.4s ease-in-out;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

@media only screen and (max-width: 1399px) {
  .fact-5__item {
    padding: 340px 15px 70px 15px;
  }
}

@media only screen and (max-width: 1199px) {
  .fact-5__item {
    padding: 160px 15px 70px 15px;
  }
}

@media only screen and (max-width: 767px) {
  .fact-5__item {
    padding: 70px 15px 70px 15px;
  }
}

.fact-5__item:hover {
  -webkit-backdrop-filter: blur(22.5px);
  backdrop-filter: blur(22.5px);
  background: rgba(255, 255, 255, 0.1);
}

.fact-5__item h2 {
  font-weight: 600;
  font-size: 100px;
  line-height: 100px;
  font-family: var(--font_instr);
  color: #fff;
  background: linear-gradient(180deg, #f3ff0a 0%, #ffffff 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media only screen and (max-width: 1199px) {
  .fact-5__item h2 {
    font-size: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .fact-5__item h2 {
    font-size: 50px;
  }
}

.fact-5__item h2 .odometer,
.fact-5__item h2 .odometer-digit,
.fact-5__item h2 .odometer-value {
  background: linear-gradient(180deg, #f3ff0a 0%, #ffffff 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-weight: 600;
}

.fact-5__item h2 .symbol {
  font-weight: 600;
  font-size: 100px;
  padding-top: 10px;
  line-height: 100px;
  margin-left: -20px;
  vertical-align: top;
  display: inline-block;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .fact-5__item h2 .symbol {
    font-size: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .fact-5__item h2 .symbol {
    line-height: 88px;
    margin-left: -10px;
  }
}

@media only screen and (max-width: 767px) {
  .fact-5__item h2 .symbol {
    font-size: 60px;
  }
}

.fact-5__item p {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--white);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px),
only screen and (max-width: 1199px) {
  .fact-5__item p br {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .fact-5__item p {
    line-height: 25px;
  }
}

.portfolio-section-5__heading-title {
  margin: auto;
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  max-width: 1213px;
  text-align: center;
  color: var(--white);
  padding-bottom: 110px;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .portfolio-section-5__heading-title {
    font-size: 40px;
    line-height: 50px;
    padding-bottom: 80px;
  }
}

@media (max-width: 575px) {
  .portfolio-section-5__heading-title {
    font-size: 25px;
    line-height: 40px;
    padding-bottom: 50px;
  }
}

.portfolio-section-5__heading-title span {
  font-size: 50px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  color: var(--white);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .portfolio-section-5__heading-title span {
    font-size: 40px;
    line-height: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio-section-5__heading-title span {
    font-size: 25px;
    line-height: 40px;
  }
}

.portfolio-section-5__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--yellow);
  padding: 14px 0 60px 0;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  border-top: 1px solid var(--yellow);
}

.portfolio-section-5__thumb {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  margin-bottom: 25px;
  display: inline-block;
}

.portfolio-section-5__thumb:last-child {
  margin-bottom: 0;
}

.portfolio-section-5__thumb:hover .portfolio-section-5__item {
  opacity: 1;
  visibility: visible;
}

.portfolio-section-5__thumb:hover .portfolio-section-5__btn {
  opacity: 1;
  visibility: visible;
}

.portfolio-section-5__item {
  opacity: 0;
  left: 45px;
  bottom: 45px;
  display: flex;
  width: 47.9%;
  position: absolute;
  visibility: hidden;
  border-radius: 10px;
  background: var(--white);
  padding: 45px 46px 45px 35px;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .portfolio-section-5__item {
    display: block;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-section-5__item {
    width: 53.9%;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-section-5__item {
    left: 20px;
    bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-section-5__item {
    opacity: 1;
    width: 100%;
    margin-top: 30px;
    position: inherit;
    visibility: visible;
  }
}

@media (max-width: 575px) {
  .portfolio-section-5__item {
    padding: 15px 15px 15px 15px;
  }
}

.portfolio-section-5__date {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  padding-top: 7px;
  position: relative;
  font-family: var(--font_kanit);
}

.portfolio-section-5__date::before {
  content: "";
  top: 22px;
  left: 127px;
  height: 2px;
  width: 214px;
  display: block;
  position: absolute;
  background: var(--black);
}

@media only screen and (max-width: 1399px) {
  .portfolio-section-5__date::before {
    top: 15px;
  }
}

.portfolio-section-5__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: 0;
  margin-bottom: 16px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 991px) {
  .portfolio-section-5__title {
    font-size: 30px;
    line-height: 46px;
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .portfolio-section-5__title {
    font-size: 23px;
    line-height: 36px;
  }
}

.portfolio-section-5__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  font-family: var(--font_kanit);
}

.portfolio-section-5__btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
  .portfolio-section-5__btn {
    opacity: inherit;
    visibility: visible;
  }
}

.portfolio-section-5__btn .rr-btn {
  right: 45px;
  bottom: 45px;
  width: 179px;
  height: 179px;
  display: flex;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 34px;
  position: absolute;
  color: var(--black);
  border-radius: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: var(--white);
  font-family: var(--font_instr);
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 991px) {
  .portfolio-section-5__btn .rr-btn {
    width: 150px;
    height: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-section-5__btn .rr-btn {
    right: 8px;
    bottom: 26px;
    width: 120px;
    height: 120px;
    color: var(--white);
    background: var(--black);
  }
}

@media (max-width: 575px) {
  .portfolio-section-5__btn .rr-btn {
    font-size: 19px;
    position: inherit;
    margin-top: 40px;
    color: var(--white);
    color: var(--black);
    background: var(--white);
  }
}

.portfolio-section-5__btn .rr-btn:hover {
  color: var(--white);
  background: var(--black);
}

@media (max-width: 575px) {
  .portfolio-section-5__btn .rr-btn:hover {
    border: 1px solid var(--white);
  }
}

.award-section-5__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--yellow);
  padding: 14px 0 72px 0;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  border-top: 1px solid var(--yellow);
}

@media only screen and (max-width: 991px) {
  .award-section-5__subtitle {
    padding: 14px 0 30px 0;
  }
}

.award-section-5__item {
  display: flex;
  padding: 38px 0;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 991px) {
  .award-section-5__item {
    padding: 30px 0;
  }
}

@media (max-width: 575px) {
  .award-section-5__item {
    align-items: start;
    flex-direction: column;
    padding: 25px 0;
  }
}

.award-section-5__item:hover .award-section-5__source {
  padding-left: 20px;
}

@media only screen and (max-width: 767px) {
  .award-section-5__item:hover .award-section-5__source {
    padding-left: 8px;
  }
}

.award-section-5__item:hover .award-section-5__title {
  color: var(--yellow);
}

.award-section-5__item:hover .award-section-5__date {
  padding-right: 20px;
}

.award-section-5__source {
  font-size: 18px;
  font-weight: 400;
  line-height: 34px;
  color: #999999;
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: var(--font_kanit);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .award-section-5__source {
    font-size: 16px;
  }
}

.award-section-5__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0;
  text-align: center;
  color: var(--white);
  font-family: var(--font_instr);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .award-section-5__title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .award-section-5__title {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .award-section-5__title {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .award-section-5__title {
    text-align: left;
  }
}

.award-section-5__date {
  font-size: 18px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  text-align: right;
  font-family: var(--font_kanit);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 991px) {
  .award-section-5__date {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .award-section-5__date {
    text-align: left;
  }
}

.brand-section-5__wrap {
  margin: 0 110px;
  margin-top: -5px;
}

@media only screen and (max-width: 1399px) {
  .brand-section-5__wrap {
    margin: 0 50px;
  }
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 767px),
(max-width: 575px) {
  .brand-section-5__wrap {
    margin: 0 0px;
  }
}

.brand-section-5__active {
  margin-bottom: 20px;
}

.brand-section-5__active .swiper-wrapper {
  transition-timing-function: linear;
}

.brand-section-5__active .swiper-wrapper .swiper-slide {
  width: auto;
}

.brand-section-5__item {
  gap: 20px;
  width: 278px;
  height: 210px;
  display: flex;
  overflow: hidden;
  background: #f1f1f1;
  position: relative;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 1399px) {
  .brand-section-5__item {
    height: 142px;
  }
}

@media only screen and (max-width: 1199px) {
  .brand-section-5__item {
    width: 154px;
  }
}

@media only screen and (max-width: 991px) {
  .brand-section-5__item {
    width: 180px;
    height: 122px;
  }
}

@media only screen and (max-width: 767px) {
  .brand-section-5__item {
    width: 134px;
    height: 86px;
  }
}

@media (max-width: 575px) {
  .brand-section-5__item {
    width: 96px;
    height: 71px;
  }
}

.brand-5__title {
  white-space: nowrap;
  font-weight: 700;
  font-size: 180px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  font-family: var(--font_instr);
}

.brand-5__title .solid {
  color: var(--black);
}

.widget-collection__slider-1 {
  animation: loop 25s linear infinite;
}

.widget-collection__slider-1 .widget-collection__inner {
  display: flex;
  align-items: center;
  gap: 50px;
}

.widget-collection__slider-1 .widget-collection__item h2 {
  white-space: nowrap;
  font-weight: 700;
  font-size: 180px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .widget-collection__slider-1 .widget-collection__item h2 {
    font-size: 150px;
  }
}

@media only screen and (max-width: 991px) {
  .widget-collection__slider-1 .widget-collection__item h2 {
    font-size: 110px;
  }
}

@media only screen and (max-width: 767px) {
  .widget-collection__slider-1 .widget-collection__item h2 {
    font-size: 80px;
  }
}

@media (max-width: 575px) {
  .widget-collection__slider-1 .widget-collection__item h2 {
    font-size: 50px;
  }
}

.widget-collection__slider-1 .widget-collection__item h2 span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  font-weight: 700;
  display: inline-block;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/** testimonial css start h-5 **/
.testimonial-5__wrapper .swipper {
  position: relative;
}

.testimonial-5__item {
  margin: 0 auto;
  max-width: 1183px;
  text-align: center;
}

.testimonial-5__quote {
  margin-bottom: 60px;
}

@media only screen and (max-width: 1199px) {
  .testimonial-5__quote {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__quote {
    margin-bottom: 30px;
  }
}

.testimonial-5__desc {
  font-size: 50px;
  font-weight: 600;
  line-height: 60px;
  text-align: center;
  margin-bottom: 60px;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .testimonial-5__desc {
    font-size: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-5__desc {
    font-size: 40px;
    line-height: 53px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__desc {
    font-size: 28px;
    line-height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-5__desc {
    font-size: 24px;
    line-height: 37px;
  }
}

@media (max-width: 575px) {
  .testimonial-5__desc {
    font-size: 18px;
    line-height: 27px;
  }
}

.testimonial-5__thumb {
  width: 210px;
  height: 210px;
  margin-top: 60px;
  margin-bottom: 39px;
  border-radius: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: 1399px) {
  .testimonial-5__thumb {
    width: 110px;
    height: 110px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__thumb {
    top: 55%;
    margin-top: 40px;
    margin-bottom: 25px;
  }
}

@media (max-width: 575px) {
  .testimonial-5__thumb {
    width: 70px;
    height: 70px;
  }
}

.testimonial-5__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonial-5__name {
  font-size: 24px;
  font-weight: 400;
  margin-top: 35px;
  line-height: 34px;
  color: var(--black);
  font-family: var(--font_kanit);
}

@media (max-width: 575px) {
  .testimonial-5__name {
    font-size: 21px;
    line-height: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__author {
    margin-top: 40px;
  }
}

.testimonial-5__arrow {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.testimonial-5__swiper-button-next {
  top: 50%;
  z-index: 2;
  width: 64px;
  height: 26px;
  position: absolute;
  border-radius: 90px;
  background: var(--yellow);
}

@media only screen and (max-width: 1199px) {
  .testimonial-5__swiper-button-next {
    top: 70%;
    width: 60px;
    height: 23px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__swiper-button-next {
    top: 55%;
    width: 50px;
    height: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-5__swiper-button-next {
    width: 40px;
    height: 15px;
  }
}

@media (max-width: 575px) {
  .testimonial-5__swiper-button-next {
    top: 60%;
    width: 30px;
    height: 12px;
  }
}

.testimonial-5__swiper-button-prev {
  top: 50%;
  right: 0;
  z-index: 2;
  width: 64px;
  height: 26px;
  position: absolute;
  border-radius: 90px;
  background: var(--black);
}

@media only screen and (max-width: 1199px) {
  .testimonial-5__swiper-button-prev {
    top: 70%;
    width: 60px;
    height: 23px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-5__swiper-button-prev {
    top: 55%;
    width: 50px;
    height: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-5__swiper-button-prev {
    width: 40px;
    height: 15px;
  }
}

@media (max-width: 575px) {
  .testimonial-5__swiper-button-prev {
    top: 60%;
    width: 30px;
    height: 12px;
  }
}

.video-section-5__headding-wrap {
  margin: 0 auto;
  max-width: 1069px;
  text-align: center;
}

.video-section-5__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  text-transform: uppercase;
  font-family: var(--font_kanit);
}

.video-section-5__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
  color: var(--black);
  margin: 28px 0 33px 0;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .video-section-5__title {
    font-size: 40px;
    line-height: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .video-section-5__title {
    font-size: 30px;
    line-height: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .video-section-5__title {
    font-size: 30px;
    line-height: 25px;
    margin: 10px 0 33px 0;
  }
}

@media (max-width: 575px) {
  .video-section-5__title {
    font-size: 22px;
  }
}

.video-section-5__title span {
  font-size: 50px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  color: var(--black);
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1399px) {
  .video-section-5__title span {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .video-section-5__title span {
    font-size: 30px;
    line-height: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .video-section-5__title span {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .video-section-5__title span {
    font-size: 22px;
    line-height: 36px;
  }
}

.video-section-5__btn .btn-black {
  color: var(--white);
  z-index: 2;
}

.video-section-5__btn .btn-black::before {
  z-index: -1;
}

.video-section-5__btn .btn-black:hover {
  color: var(--black);
}

.video-section-5__play {
  text-align: center;
  background-size: cover;
  padding: 325px 0 325px 0;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1399px) {
  .video-section-5__play {
    text-align: center;
    padding: 33px 0 345px 0;
    background-repeat: no-repeat;
  }
}

@media only screen and (max-width: 1199px) {
  .video-section-5__play {
    padding: 33px 0 251px 0;
  }
}

@media only screen and (max-width: 991px) {
  .video-section-5__play {
    padding: 33px 0 201px 0;
  }
}

@media only screen and (max-width: 767px) {
  .video-section-5__play {
    padding: 33px 0 133px 0;
  }
}

@media (max-width: 575px) {
  .video-section-5__play {
    padding: 33px 0 41px 0;
  }
}

.video-section-5__play a {
  width: 150px;
  height: 150px;
  display: flex;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  background: var(--white);
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1399px) {
  .video-section-5__play a {
    transform: translateY(112%);
  }
}

@media only screen and (max-width: 1199px) {
  .video-section-5__play a {
    transform: translateY(76%);
  }
}

@media only screen and (max-width: 991px) {
  .video-section-5__play a {
    width: 100px;
    height: 100px;
    transform: translateY(77%);
  }
}

@media only screen and (max-width: 767px) {
  .video-section-5__play a {
    width: 80px;
    height: 80px;
    transform: translateY(54%);
  }
}

@media (max-width: 575px) {
  .video-section-5__play a {
    width: 55px;
    height: 55px;
    font-size: 16px;
    transform: translateY(10%);
  }
}

.why-choose-us-5__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
  font-family: var(--font_kanit);
}

.why-choose-us-5__wrap {
  gap: 293px;
  display: grid;
  grid-template-columns: 592px 1fr;
}

@media only screen and (max-width: 1399px) {
  .why-choose-us-5__wrap {
    gap: 60px;
    grid-template-columns: 470px 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .why-choose-us-5__wrap {
    grid-template-columns: 340px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .why-choose-us-5__wrap {
    grid-template-columns: 280px 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .why-choose-us-5__wrap {
    grid-template-columns: 1fr;
  }
}

.why-choose-us-5__box .accordion-item {
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.why-choose-us-5__box .accordion-button {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--black);
  padding: 25px 25px;
  border-radius: 10px;
  background: #f1f1f1;
  border-radius: 0;
  font-family: var(--font_instr);
}

@media only screen and (max-width: 1199px) {
  .why-choose-us-5__box .accordion-button {
    font-size: 22px;
    padding: 13px 18px;
  }
}

@media only screen and (max-width: 991px) {
  .why-choose-us-5__box .accordion-button {
    font-size: 20px;
  }
}

@media (max-width: 575px) {
  .why-choose-us-5__box .accordion-button {
    font-size: 18px;
  }
}

.why-choose-us-5__box .accordion-button:focus {
  box-shadow: none;
}

.why-choose-us-5__box .accordion-button:not(.collapsed) {
  color: inherit;
  box-shadow: inherit;
  background-color: var(--yellow);
}

.why-choose-us-5__box .accordion-button:not(.collapsed)::after {
  content: "-";
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
}

.why-choose-us-5__box .accordion-button:after {
  content: "+";
  font-size: 24px;
  transform: none;
  font-size: 26px;
  font-weight: 700;
  color: var(--black);
  background-image: none;
}

@media only screen and (max-width: 1199px) {
  .why-choose-us-5__box .accordion-button:after {
    margin-top: -8px;
  }
}

@media (max-width: 575px) {
  .why-choose-us-5__box .accordion-button:after {
    font-size: 18px;
    margin-top: -16px;
  }
}

.why-choose-us-5__box .accordion-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  background: var(--yellow);
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1199px) {
  .why-choose-us-5__box .accordion-body {
    font-size: 17px;
  }
}

@media only screen and (max-width: 991px) {
  .why-choose-us-5__box .accordion-body {
    font-size: 16px;
    line-height: 25px;
  }
}

.why-choose-us-5__box .accordion-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: 100%;
  color: var(--white);
  margin: 25px 0 9px 0;
  justify-content: center;
  background: var(--black);
}

.why-choose-us-5__subtitle {
  padding-top: 11px;
  border-top: 1px solid var(--black);
}

.blog-section-5 .row {
  -moz-column-gap: 60px;
  column-gap: 60px;
}

.blog-section-5__wrapper {
  background: var(--black);
}

.blog-section-5__btn .rr-btn-green {
  padding: 23px 58px;
  border-radius: 90px;
}

@media (max-width: 575px) {
  .blog-section-5__btn .rr-btn-green {
    padding: 16px 30px;
  }
}

.blog-section-5__wrap {
  gap: 60px;
  display: grid;
  grid-template-columns: auto auto auto;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__wrap {
    gap: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-section-5__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .blog-section-5__wrap {
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .blog-section-5__wrap {
    grid-template-columns: 1fr;
  }
}

.blog-section-5__item {
  border-radius: 10px;
  background: var(--white);
  padding: 43px 30px 35px 30px;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__item {
    padding: 43px 15px 35px 15px;
  }
}

.blog-section-5__item:hover .blog-section-5__icon a {
  color: var(--black);
  background: var(--yellow);
}

.blog-section-5__thumb {
  position: relative;
}

.blog-section-5__thumb img {
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url(../imgs/blog/mask.jpg);
  mask-image: url(../imgs/blog/mask.jpg);
  -webkit-mask-size: 100%, 100%;
  mask-size: 100%, 100%;
  position: relative;
}

.blog-section-5__meta {
  gap: 73px;
  display: flex;
  padding-left: 12px;
  align-items: center;
}

.blog-section-5__catagory {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  position: relative;
  color: var(--black);
  font-family: var(--font_kanit);
}

.blog-section-5__catagory::before {
  content: "";
  top: 12px;
  width: 6px;
  left: -13px;
  height: 6px;
  display: block;
  position: absolute;
  border-radius: 100%;
  background: var(--black);
}

.blog-section-5__time {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  position: relative;
  font-family: var(--font_kanit);
}

.blog-section-5__time::before {
  content: "";
  top: 14px;
  left: -50px;
  width: 30px;
  height: 1px;
  display: block;
  position: absolute;
  border-radius: 100%;
  background: var(--black);
}

.blog-section-5__title {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--black);
  padding: 37px 0 33px 0;
  font-family: var(--font_instr);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__title br {
    display: none;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__title {
    font-size: 20px;
    line-height: 33px;
    padding: 24px 0 24px 0;
  }
}

@media (max-width: 575px) {
  .blog-section-5__title {
    font-size: 17px;
    line-height: 26px;
  }
}

.blog-section-5__title:hover {
  color: var(--secondary);
}

.blog-section-5__icon {
  margin-top: 35px;
}

.blog-section-5__icon a {
  width: 56px;
  height: 56px;
  display: flex;
  color: var(--white);
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  background: var(--black);
  transform: rotate(-45deg);
}

@media only screen and (max-width: 1199px) {
  .blog-section-5__icon a {
    width: 46px;
    height: 46px;
  }
}

.blog-section-5__date {
  top: 6px;
  right: 33px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  position: absolute;
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__date {
    top: 0;
    right: 8px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-section-5__date {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-section-5__date {
    grid-template-columns: repeat(2, 1fr);
    right: 0;
  }
}

/* === Intro scss (seo-agency) === */
.intro-area6 {
  position: relative;
  padding: 250px 0 120px;
}

@media only screen and (max-width: 1199px) {
  .intro-area6 {
    padding: 180px 0 120px;
  }
}

.intro-area6__title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 100px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1919px) {
  .intro-area6__title {
    font-size: 90px;
  }
}

@media only screen and (max-width: 1199px) {
  .intro-area6__title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 991px) {
  .intro-area6__title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__title {
    font-size: 20px;
  }
}

.intro-area6__title img {
  width: 200px;
}

@media only screen and (max-width: 991px) {
  .intro-area6__title img {
    width: 140px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__title img {
    width: 120px;
  }
}

.intro-area6__title-title2 {
  display: block;
  margin-left: 25%;
}

.intro-area6__content {
  position: relative;
}

.intro-area6__content-subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 141.667%;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-subtitle {
    font-size: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-subtitle {
    font-size: 16px;
  }
}

.intro-area6__content-newsletter {
  position: relative;
  margin-bottom: 120px;
}

@media only screen and (max-width: 991px) {
  .intro-area6__content-newsletter {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-newsletter {
    margin-bottom: 60px;
  }
}

.intro-area6__content-newsletter-box {
  display: flex;
  gap: 10px;
  width: 610px;
  position: relative;
  z-index: 5;
  border-radius: 35px;
  background: #fff;
  padding: 26px 25px;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-newsletter-box {
    width: 460px;
    padding: 20px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-newsletter-box {
    width: 300px;
    padding: 15px 15px;
  }
}

.intro-area6__content-newsletter-box input {
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  border-radius: 20px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
  padding: 10px 30px;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-newsletter-box input {
    padding: 10px 24px;
    font-size: 13px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-newsletter-box input {
    padding: 10px 10px;
    font-size: 10px;
  }
}

.intro-area6__content-newsletter-button-text {
  padding: 11px 130px;
  color: #fff;
  font-family: Kanit;
  font-size: 16px;
  display: block;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  border-radius: 20px;
  border: 1px solid #000;
  background: #000;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-newsletter-button-text {
    padding: 11px 90px;
    font-size: 13px;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-newsletter-button-text {
    padding: 11px 50px;
    font-size: 11px;
  }
}

.intro-area6__content-items {
  display: inline-flex;
  border-top: 1px solid var(--border-color-one);
  border-bottom: 1px solid var(--border-color-one);
  gap: 50px;
  padding: 30px 0px;
}

.intro-area6__content-items-count-list {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 70px;
  font-style: normal;
  font-weight: 700;
  line-height: 71.429%;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .intro-area6__content-items-count-list {
    font-size: 50px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-items-count-list {
    font-size: 30px;
  }
}

.intro-area6__content-items-count-subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-items-count-subtitle {
    font-size: 18px;
  }
}

.intro-area6__content-items-area-subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  margin-bottom: 13px;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-items-area-subtitle {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

.intro-area6__content-items-area-star i {
  color: #ff8800;
}

.intro-area6__content-plane {
  position: absolute;
  left: 50%;
  top: 43%;
}

@media only screen and (max-width: 1399px) {
  .intro-area6__content-plane {
    left: 50%;
    top: 53%;
  }
}

@media only screen and (max-width: 1199px) {
  .intro-area6__content-plane {
    left: 50%;
    top: 20%;
  }
}

@media only screen and (max-width: 991px) {
  .intro-area6__content-plane {
    left: 50%;
    top: 15%;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area6__content-plane {
    display: none;
  }
}

.intro-area6__content-plane img {
  max-width: 100%;
}

.intro-area6__info {
  position: relative;
}

.intro-area6__info-thumb {
  border-radius: 20px;
}

.intro-area6__info-thumb img {
  border-radius: 20px;
  max-width: 100%;
}

.intro-area6__info-button {
  position: absolute;
  right: 0%;
  bottom: 0%;
}

/* === about-area6 scss (seo-agency) === */
.about-area6__wrapper {
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .about-area6__wrapper {
    margin-bottom: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area6__wrapper {
    margin-bottom: 90px;
  }
}

.about-area6__number {
  position: relative;
}

.about-area6__number-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 350px;
  font-style: normal;
  font-weight: 500;
  line-height: 71.429%;
}

@media only screen and (max-width: 1919px) {
  .about-area6__number-title {
    font-size: 250px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area6__number-title {
    font-size: 200px;
  }
}

.about-area6__number-button {
  position: absolute;
  top: 35%;
  left: 10%;
  border-radius: 90px;
  border: 1px solid #000;
  background: #f3ff0a;
  display: inline-flex;
  transform: rotate(-20.524deg);
  padding: 20px 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  display: block;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .about-area6__number-button {
    font-size: 18px;
    padding: 16px 20px;
    top: 25%;
    left: 6%;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area6__number-button {
    font-size: 16px;
    padding: 16px 18px;
    top: 25%;
    left: 6%;
  }
}

.about-area6__content {
  position: relative;
}

.about-area6__content-thumb {
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .about-area6__content-thumb {
    margin-bottom: 16px;
  }
}

.about-area6__content-subtitle {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .about-area6__content-subtitle {
    margin-bottom: 14px;
    font-size: 16px;
  }
}

.about-area6__content-star {
  margin-bottom: 45px;
}

.about-area6__content-star i {
  color: #ff8800;
}

.about-area6__content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  width: 841px;
}

@media only screen and (max-width: 1919px) {
  .about-area6__content-title {
    font-size: 35px;
    width: 760px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area6__content-title {
    font-size: 30px;
    width: 660px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area6__content-title {
    font-size: 25px;
    width: 600px;
  }
}

@media only screen and (max-width: 991px) {
  .about-area6__content-title {
    font-size: 21px;
    width: 500px;
  }
}

@media only screen and (max-width: 767px) {
  .about-area6__content-title {
    font-size: 20px;
    width: 290px;
  }
}

.about-area6__content-image-shape {
  position: absolute;
  top: 9%;
  right: 1%;
}

@media only screen and (max-width: 1919px) {
  .about-area6__content-image-shape {
    top: -20%;
    right: 0%;
  }
}

@media only screen and (max-width: 991px) {
  .about-area6__content-image-shape {
    display: none;
  }
}

.about-area6__content-image-shape img {
  max-width: 100%;
}

.about-area6__thumb {
  display: flex;
  justify-content: center;
}

.about-area6__thumb img {
  max-width: 100%;
}

/* === feature-area6 scss (seo-agency) === */
.feature-area6-wrapper__line {
  margin-bottom: 60px;
}

.feature-area6-wrapper__line img {
  max-width: 100%;
  margin-left: 2%;
}

@media only screen and (max-width: 991px) {
  .feature-area6__content {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}

.feature-area6__content-icon {
  margin-bottom: 13px;
}

.feature-area6__content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  margin-bottom: 13px;
}

@media only screen and (max-width: 1919px) {
  .feature-area6__content-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 1399px) {
  .feature-area6__content-title {
    font-size: 18px;
    margin-bottom: 7px;
  }
}

@media only screen and (max-width: 1199px) {
  .feature-area6__content-title {
    font-size: 22px;
    margin-bottom: 7px;
  }
}

.feature-area6__content-subtitle {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  width: 337px;
}

@media only screen and (max-width: 1919px) {
  .feature-area6__content-subtitle {
    font-size: 16px;
    width: 300px;
  }
}

@media only screen and (max-width: 1399px) {
  .feature-area6__content-subtitle {
    width: 226px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 1199px) {
  .feature-area6__content-subtitle {
    width: 340px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .feature-area6__content-subtitle {
    text-align: center;
    margin: 0 auto;
    width: 300px;
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .feature-area6__content-subtitle {
    width: 260px;
    font-size: 16px;
  }
}

/* === service-area6 scss (seo-agency) === */
.service-area6 {
  background-color: #000;
  border-radius: 6px;
}

.service-area6 .section-top6__title {
  color: #fff;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.service-area6__card-info {
  position: relative;
  opacity: 0;
  visibility: hidden;
}

.service-area6__card-info-number {
  position: relative;
  color: #fff;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  display: block;
  line-height: 100%;
  margin-bottom: 25px;
}

.service-area6__card-info-number::before {
  position: absolute;
  content: "";
  background: #fff;
  width: 45px;
  height: 1px;
  top: 50%;
  left: 2%;
}

.service-area6__card-info-title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  line-height: 114.286%;
}

/* === wcu-area6 scss (seo-agency) === */
.wcu-area6 {
  position: relative;
}

.wcu-area6 .shape1 {
  position: absolute;
  bottom: 0;
  left: -3%;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6 .shape1 {
    display: none;
  }
}

.wcu-area6-content .section-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-align: left;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6-content .section-title {
    font-size: 39px;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area6-content .section-title {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1199px) {
  .wcu-area6-content .section-title {
    margin-bottom: 50px;
    margin-top: -50px;
  }
}

@media only screen and (max-width: 991px) {
  .wcu-area6-content .section-title {
    font-size: 22px;
  }
}

.wcu-area6-content__items {
  margin-left: 20%;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6-content__items {
    margin-left: 0%;
  }
}

.wcu-area6-content__items-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  width: 544px;
  margin-bottom: 35px;
}

.wcu-area6-content__items-list {
  margin-bottom: 35px;
}

.wcu-area6-content__items-list-items {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  list-style: none;
  line-height: 155.556%;
}

.wcu-area6-content__items-list-items:not(:last-child) {
  margin-bottom: 10px;
}

.wcu-area6-content__items-list-items svg {
  margin-right: 6px;
}

.wcu-area6__items {
  position: relative;
}

.wcu-area6__items-thumb1 {
  position: relative;
}

.wcu-area6__items-thumb1 img {
  max-width: 100%;
}

.wcu-area6__items-thumb2 {
  position: absolute;
  bottom: 8%;
  right: 9%;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6__items-thumb2 {
    bottom: 3%;
    right: 0%;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area6__items-thumb2 {
    bottom: 3%;
    right: 14%;
  }
}

@media only screen and (max-width: 1199px) {
  .wcu-area6__items-thumb2 {
    bottom: 3%;
    right: 0%;
  }
}

.wcu-area6__items-thumb2 img {
  max-width: 100%;
}

.wcu-area6__items-thumb3 {
  margin-top: 20px;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6__items-thumb3 {
    margin-left: -137px !important;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area6__items-thumb3 {
    margin-left: 10px !important;
  }
}

.wcu-area6__items-thumb3 img {
  max-width: 100%;
}

.wcu-area6__items-plane {
  position: absolute;
  top: -19%;
  right: -5%;
}

@media only screen and (max-width: 1919px) {
  .wcu-area6__items-plane {
    top: -16%;
    right: -18%;
  }
}

@media only screen and (max-width: 1399px) {
  .wcu-area6__items-plane {
    top: -11%;
    right: 3%;
  }
}

@media only screen and (max-width: 1199px) {
  .wcu-area6__items-plane {
    top: -11%;
    right: -14%;
  }
}

@media only screen and (max-width: 991px) {
  .wcu-area6__items-plane {
    display: none;
  }
}

.wcu-area6__items-plane img {
  max-width: 100%;
}

/* === banner-area6 scss (seo-agency) === */
.banner-area6 {
  padding: 400px 0px;
}

@media only screen and (max-width: 1919px) {
  .banner-area6 {
    padding: 300px 0px;
  }
}

@media only screen and (max-width: 1399px) {
  .banner-area6 {
    padding: 250px 0px;
  }
}

/* === brand-area6 scss (seo-agency) === */
.brand-area6__image {
  padding: 45px 60px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0);
}

.brand-area6__image img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
  object-fit: contain;
}

@media only screen and (max-width: 1919px) {
  .brand-area6__image img {
    width: 111px;
    height: 42px;
  }
}

@media only screen and (max-width: 1399px) {
  .brand-area6__image img {
    width: 111px;
    height: 41px;
  }
}

@media only screen and (max-width: 1199px) {
  .brand-area6__image img {
    max-width: 100%;
    height: 41px;
  }
}

/* === project-area6 scss (seo-agency) === */
.project-area6 .section-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-align: left;
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .project-area6 .section-title {
    font-size: 39px;
  }
}

@media only screen and (max-width: 1399px) {
  .project-area6 .section-title {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1199px) {
  .project-area6 .section-title {
    margin-bottom: 50px;
    margin-top: -50px;
  }
}

@media only screen and (max-width: 991px) {
  .project-area6 .section-title {
    font-size: 22px;
  }
}

.project-area6__items {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media only screen and (max-width: 1399px) {
  .project-area6__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .project-area6__items {
    grid-template-columns: repeat(1, 1fr);
  }
}

.project-area6__card {
  position: relative;
  overflow: hidden;
}

.project-area6__card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(217, 217, 217, 0) 47.59%, rgba(0, 0, 0, 0.5) 76.87%, #000 100%);
  z-index: 2;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.project-area6__card-content {
  position: absolute;
  top: 35px;
  left: 35px;
  z-index: 99;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.project-area6__card-content-subtitle {
  padding: 6px 20px;
  border-radius: 10px;
  background: #fff;
  display: block;
  color: #000;
  font-family: Kanit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 133.333%;
  text-transform: uppercase;
  width: 192px;
  list-style-type: disc;
  margin-bottom: 100px;
}

@media only screen and (max-width: 1919px) {
  .project-area6__card-content-subtitle {
    margin-bottom: 50px;
  }
}

.project-area6__card-content-subtitle:last-child {
  list-style-type: disc;
}

.project-area6__card-content-button {
  position: relative;
  margin-left: 50%;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1919px) {
  .project-area6__card-content-button {
    margin-left: 35%;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 1919px) {
  .project-area6__card-content-button svg {
    width: 30%;
    height: 30%;
  }
}

.project-area6__card-content-button-text a {
  position: absolute;
  top: 38%;
  left: 20%;
  color: #000;
  font-family: "Instrument Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%;
}

@media only screen and (max-width: 1919px) {
  .project-area6__card-content-button-text a {
    top: 35%;
    left: 8%;
    font-size: 15px;
  }
}

@media only screen and (max-width: 1199px) {
  .project-area6__card-content-button-text a {
    top: 35%;
    left: 6%;
    font-size: 13px;
  }
}

.project-area6__card-content-title-dsc {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  width: 289px;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1199px) {
  .project-area6__card-content-title-dsc {
    font-size: 20px;
  }
}

.project-area6__card-content-title-dsc:hover {
  color: #f3ff0a;
  transition: all 0.4s ease-in-out;
}

.project-area6__card:hover::before {
  opacity: 1;
  visibility: visible;
}

.project-area6__card:hover .project-area6__card-content {
  opacity: 1;
  visibility: visible;
}

/* === testimonial-area6 scss (seo-agency) === */
.testimonial-area6 {
  position: relative;
  background: #f5f5f5;
}

.testimonial-area6__line {
  position: absolute;
  top: 0%;
  left: 0;
  right: 0;
}

.testimonial-area6__line img {
  max-width: 100%;
}

.testimonial-area6-thumb {
  padding: 60px 90px 0px;
  border-radius: 20px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area6-thumb {
    padding: 40px 34px 0px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6-thumb {
    padding: 21px 34px 0px;
  }
}

.testimonial-area6__items {
  padding: 35px 20px;
  background-color: #f5f5f5;
  border-radius: 10px 10px 0px 0px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items {
    padding: 25px 20px;
  }
}

.testimonial-area6__items-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 126px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items-info {
    margin-bottom: 90px;
  }
}

.testimonial-area6__items-info-content-point {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 16px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area6__items-info-content-point {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items-info-content-point {
    font-size: 35px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area6__items-info-content-point {
    font-size: 25px;
  }
}

.testimonial-area6__items-info-content-subtitle {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media only screen and (max-width: 1199px) {
  .testimonial-area6__items-info-content-subtitle {
    font-size: 18px;
  }
}

.testimonial-area6__items-info-thumb img {
  width: 109px;
}

.testimonial-area6__items-image {
  margin-bottom: 156px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items-image {
    margin-bottom: 106px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area6__items-image {
    margin-bottom: 86px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-area6__items-image {
    margin-bottom: 50px;
  }
}

.testimonial-area6__items-image-thumb img {
  max-width: 100%;
}

.testimonial-area6__items-image-subtitle {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.testimonial-area6__items-button-items {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items-button-items {
    flex-wrap: wrap;
    gap: 15px;
  }
}

.testimonial-area6__items-button-items-logo img {
  width: 180px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__items-button-items-logo img {
    width: 150px;
  }
}

.testimonial-area6__card {
  padding: 60px 30px;
  border-radius: 20px;
  background: #fff;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area6__card {
    padding: 50px 25px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__card {
    padding: 40px 25px;
  }
}

.testimonial-area6__card-content-icon {
  margin-bottom: 50px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__card-content-icon {
    margin-bottom: 30px;
  }
}

.testimonial-area6__card-content-icon svg {
  width: 50px;
}

.testimonial-area6__card-content-subtitle {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area6__card-content-subtitle {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__card-content-subtitle {
    font-size: 20px;
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .testimonial-area6__card-content-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
  }
}

.testimonial-area6__card-content-items-thumb {
  margin-bottom: 20px;
}

.testimonial-area6__card-content-items-thumb img {
  width: 80px;
}

.testimonial-area6__card-content-items-subtitle {
  color: #000;
  font-family: Kanit;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 141.667%;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area6__card-content-items-subtitle {
    font-size: 22px;
  }
}

/* === achievement-area6 scss (seo-agency) === */
.achievement-area6 {
  background: #f5f5f5;
}

.achievement-area6-wrapper {
  padding: 50px 80px 80px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 1919px) {
  .achievement-area6-wrapper {
    padding: 40px 60px 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .achievement-area6-wrapper {
    padding: 30px 40px 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .achievement-area6-wrapper {
    padding: 25px;
  }
}

.achievement-area6__items-year {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .achievement-area6__items-year {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .achievement-area6__items-year {
    font-size: 50px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 1199px) {
  .achievement-area6__items-year {
    font-size: 40px;
  }
}

.achievement-area6__items-title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 138.462%;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .achievement-area6__items-title {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .achievement-area6__items-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
}

.achievement-area6__items-subtitle {
  color: #fff;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 45px;
}

@media only screen and (max-width: 1919px) {
  .achievement-area6__items-subtitle {
    font-size: 17px;
  }
}

@media only screen and (max-width: 1399px) {
  .achievement-area6__items-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }
}

.achievement-area6__items-thumb img {
  max-width: 100%;
}

/* === integration-area6 scss (seo-agency) === */
.integration-area6 .section-top6__title {
  margin-bottom: 35px;
}

.integration-area6__items {
  text-align: center;
  justify-content: center;
}

.integration-area6__items-thumb {
  margin-bottom: 100px;
}

.integration-area6__items-thumb img {
  max-width: 100%;
}

.integration-area6__items-line img {
  max-width: 100%;
}

/* === blog-area6 scss (seo-agency) === */
.blog-area6 {
  background: var(--white);
}

.blog-area6 .section-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-align: left;
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .blog-area6 .section-title {
    font-size: 39px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area6 .section-title {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area6 .section-title {
    margin-bottom: 50px;
    margin-top: -50px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area6 .section-title {
    font-size: 22px;
  }
}

.blog-area6__card-thumb {
  position: relative;
  overflow: hidden;
}

.blog-area6__card-thumb img {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.blog-area6__card-thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
  -moz-transform: translateX(50%) scaleX(2);
  -ms-transform: translateX(50%) scaleX(2);
  -o-transform: translateX(50%) scaleX(2);
}

.blog-area6__card-thumb:hover img:first-child {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.blog-area6__card-thumb:hover img:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.blog-area6__card-content {
  padding: 45px 40px 45px 30px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1919px) {
  .blog-area6__card-content {
    padding: 35px 30px 35px 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area6__card-content {
    padding: 25px 20px 35px 20px;
  }
}

.blog-area6__card-content-post {
  display: flex;
  gap: 30px;
  margin-bottom: 23px;
  list-style: none;
}

@media only screen and (max-width: 1399px) {
  .blog-area6__card-content-post {
    margin-bottom: 16px;
  }
}

.blog-area6__card-content-post-date {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

.blog-area6__card-content-post-date:last-child {
  list-style-type: disc;
}

.blog-area6__card-content-title {
  color: #000;
  font-family: "Instrument Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .blog-area6__card-content-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.blog-area6__card-content-link {
  border-radius: 90px;
  background: #000;
  width: 56px;
  height: 56px;
  line-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #000;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .blog-area6__card-content-link {
    width: 46px;
    height: 46px;
    line-height: 46px;
  }
}

/* === Marque scss (seo-agency) === */
.marque-section6 {
  padding: 90px 0px 110px;
  background: var(--black);
  position: relative;
  white-space: nowrap;
  z-index: 9;
}

.marque-section6 .marquee-inner {
  position: relative;
}

@media only screen and (max-width: 1919px) {
  .marque-section6 {
    padding: 80px 0px 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .marque-section6 {
    padding: 50px 0px 50px;
  }
}

.text-slider-3 {
  /* height: 100px; */
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 180px;
  font-style: normal;
  text-align: center;
  font-weight: 700;
  line-height: 180px;
  text-transform: lowercase;
}

.text-slider-3:not(:last-child) {
  margin-right: 60px;
}

@media only screen and (max-width: 1919px) {
  .text-slider-3 {
    font-size: 150px;
  }
}

@media only screen and (max-width: 1399px) {
  .text-slider-3 {
    font-size: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .text-slider-3 {
    font-size: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .text-slider-3 {
    font-size: 50px;
  }
}

.text-slider-4 {
  /* height: 100px; */
  text-align: center;
  color: #f14f44;
  /* -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff; */
  font-family: "Instrument Sans";
  font-size: 180px;
  font-style: normal;
  font-weight: 700;
  line-height: 180px;
  text-transform: lowercase;
}

@media only screen and (max-width: 1919px) {
  .text-slider-4 {
    font-size: 150px;
  }
}

.text-slider-4:not(:last-child) {
  margin-right: 60px;
}

@media only screen and (max-width: 1399px) {
  .text-slider-4 {
    font-size: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .text-slider-4 {
    font-size: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .text-slider-4 {
    font-size: 50px;
  }
}

.marquee-inner {
  position: absolute;
  display: flex;
  width: max-content;
}

.marquee-list {
  display: flex;
  flex-shrink: 0;
}

.marquee-item {
  display: flex;
  transition: animation 0.2s ease-out;
}

.marquee-inner.to-left {
  animation: marqueeLeft 80s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee-inner.to-right {
  animation: marqueeRight 80s linear infinite;
}

@keyframes marqueeRight {
  0% {
    right: 0;
  }

  100% {
    right: -100%;
  }
}

/* === Footer Section scss (seo-agency) === */
.footer-area6 {
  background: var(--black);
}

.footer-area6__top {
  padding: 120px 0px;
  text-align: center;
  align-items: center;
}

@media only screen and (max-width: 1399px) {
  .footer-area6__top {
    padding: 90px 0px;
  }
}

.footer-area6__top-title {
  color: #fff;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 40px;
}

@media only screen and (max-width: 1919px) {
  .footer-area6__top-title {
    font-size: 40px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area6__top-title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area6__top-title {
    font-size: 33px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-area6__top-title {
    font-size: 22px;
  }
}

.footer-area6-main {
  padding: 70px 70px 0px;
  border-radius: 20px 20px 0 0;
  background: #101010;
}

@media only screen and (max-width: 1199px) {
  .footer-area6-main {
    padding: 25px;
  }
}

.footer-area6-widget__title {
  color: #fff;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 30px;
}

.footer-area6-widget__nav-link {
  display: block;
  color: #999;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  transition: all 0.4s ease-in-out;
}

.footer-area6-widget__nav-link:hover {
  color: #ff6e00;
}

.footer-area6-bottom__wrapper {
  padding: 10px 0 15px;
}

.footer-area6-bottom__copyright {
  color: #fff;
  text-align: center;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 767px) {
  .footer-area6-bottom__copyright {
    font-size: 16px;
  }
}

/* === Hero Section (Home 05) === */
.intro-area7 {
  background: #0b0b0b;
  color: #ffffff;
  padding: 230px 0 120px;
  position: relative;
}

@media only screen and (max-width: 1919px) {
  .intro-area7 {
    padding: 180px 0 120px;
  }
}

@media only screen and (max-width: 1919px) {
  .intro-area7 {
    padding: 150px 0 100px;
  }
}

.intro-area7__content {
  text-align: left;
  padding-right: clamp(10px, 4vw, 40px);
  margin-bottom: 2rem;
}

.intro-area7__title {
  color: #fff;
  font-family: var(--font_kanit);
  font-size: 160px;
  font-style: normal;
  font-weight: 600;
  line-height: 140px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media only screen and (max-width: 1919px) {
  .intro-area7__title {
    font-size: 66px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 767px) {
  .intro-area7__title {
    font-size: 46px;
    line-height: 1.1;
  }
}

.intro-area7__title .intro-area7__highlight {
  color: #9eff00;
  margin: 0 0.3rem;
}

.intro-area7__play {
  display: inline-flex;
  border-radius: 50px;
}

.intro-area7__play-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
}

.intro-area7__play-icon i {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
}

.intro-area7__stats {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 130px;
  margin-top: 121px;
}

@media only screen and (max-width: 767px) {
  .intro-area7__stats {
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
  }
}

.intro-area7__stat {
  padding-top: 30px;
  border-top: 1px solid var(--border-color-one);
  max-width: 250px;
}

.intro-area7__stat-number {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  line-height: 70px;
  /* 100% */
  margin-bottom: 0.4rem;
}

@media only screen and (max-width: 1919px) {
  .intro-area7__stat-number {
    font-size: 40px;
    line-height: 1.1;
  }
}

.intro-area7__stat-text {
  color: #cfcfcf;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.45;
  max-width: 95%;
}

.intro-area7__images {
  display: flex;
  justify-content: center;
}

.intro-area7__image-stack {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.intro-area7__image-stack .intro-area7__image {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s ease, opacity 0.4s ease;
  width: 100%;
}

.intro-area7__image--main {
  width: 100%;
  z-index: 2;
}

.intro-area7__image-stack:hover .intro-area7__image--main {
  transform: translateX(-10px);
}

.intro-area7__image-stack:hover .intro-area7__image--side {
  transform: translateX(10px);
}

@media (max-width: 991.98px) {
  .intro-area7__content {
    text-align: center;
    padding-right: 0;
  }

  .intro-area7__title {
    justify-content: center;
    margin-top: 50px;
  }

  .intro-area7__stats {
    text-align: center;
  }

  .intro-area7__image-stack {
    justify-content: center;
  }

  .intro-area7__image-stack .intro-area7__image--side {
    display: none;
  }

  .intro-area7__image-stack .intro-area7__image--main {
    max-width: 100%;
  }
}

.clients-line7 {
  background: #9ad000;
  padding: clamp(12px, 2.2vw, 22px) 0;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.clients-line7__slider {
  overflow: visible;
}

.clients-line7__slider .swiper-wrapper {
  align-items: center;
}

.clients-line7__item {
  display: grid;
  place-items: center;
  padding: 6px 0;
}

.clients-line7__logo {
  width: clamp(28px, 4vw, 44px);
  height: auto;
  display: block;
  color: #000;
  fill: currentColor;
}

.clients-line7__nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.clients-line7__nav:hover {
  opacity: 0.9;
}

.clients-line7__nav::after {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.clients-line7__nav--prev {
  left: -6px;
}

.clients-line7__nav--next {
  right: -6px;
}

@media (max-width: 767.98px) {
  .clients-line7__nav {
    display: none;
  }
}

.about-area7 {
  background: var(--black);
  position: relative;
}

.about-area7__eyebrow {
  display: inline-block;
  color: #c9ff3d;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-area7__title {
  color: var(--white);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 50px;
  line-height: 60px;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-bottom: 70px;
}

@media only screen and (max-width: 1919px) {
  .about-area7__title {
    font-size: 36px;
    line-height: 1.1;
  }
}

.about-area7__cta-group {
  display: flex;
  flex-wrap: wrap;
}

.about-area7__btn {
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  transition: all 0.2s ease;
}

.about-area7__btn--primary {
  background: linear-gradient(135deg, #6f54ff, #a64dff);
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(166, 77, 255, 0.35);
}

.about-area7__btn--primary:hover {
  transform: translateY(-2px);
}

.about-area7__btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-area7__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.about-area7__visual {
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  height: 100%;
  border-radius: 16px;
}

.about-area7__visual img {
  height: 100%;
  width: 100%;
  border-radius: 16px;
}

.about-area7__visual-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 120, 100, 0.25), rgba(20, 10, 60, 0.5)), url("assets/img/server-room.jpg") center/cover no-repeat;
}

.stats-card {
  background: var(--purple);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 1rem;
  color: #ffffff;
  height: 100%;
}

.stats-card__inner {
  position: relative;
  border-radius: calc(1.25rem - 0.25rem);
  padding: 1.2rem;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
}

.stats-card__number {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 290px;
  line-height: 220px;
}

@media only screen and (max-width: 1919px) {
  .stats-card__number {
    font-size: 180px;
  }
}

.stats-card__label {
  position: absolute;
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(-90deg);
  bottom: 68%;
  right: 0;
}

@media only screen and (max-width: 1919px) {
  .stats-card__label {
    font-size: 12px;
  }
}

.stats-card__badges {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  align-items: center;
  padding: 14px 25px;
  background: var(--white);
  border-radius: 16px;
}

@media only screen and (max-width: 1919px) {
  .stats-card__badges {
    flex-direction: column;
  }
}

.stats-card__badges .stats-card__reviews {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 15px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--primary);
}

.stats-card__badges .stats-card__reviews strong {
  display: block;
  font-weight: 800;
}

.stats-card__avatars {
  display: flex;
  align-items: center;
}

.stats-card__avatars .stats-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin-left: -30px;
  background: var(--primary);
}

.stats-card__avatars .stats-card__avatar:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .about-area7__btn {
    width: 100%;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .stats-card__badges {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media only screen and (max-width: 575px) {
  .about-area7__title {
    font-size: 1.1rem;
  }
}

.cyber-services7 {
  background: #000;
  color: #fff;
  padding: clamp(60px, 8vw, 120px) 0;
}

.cyber-services7__subtitle {
  color: #a6ff00;
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.75rem;
}

.cyber-services7 .section-title {
  max-width: 100%;
  margin: 0 auto 70px;
  text-decoration: underline;
}

@media only screen and (max-width: 1919px) {
  .cyber-services7 .section-title {
    font-size: 36px;
    line-height: 1.1;
  }
}

.cyber-services7__cards {
  row-gap: 24px;
}

.cyber-services7__card {
  background: #121212;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 60px 35px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.cyber-services7__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(111, 60, 255, 0.25);
  background: radial-gradient(120% 120% at 100% 100%, rgba(111, 60, 255, 0.18) 0%, #121212 45%, #121212 100%);
}

.cyber-services7__card--highlight {
  background: radial-gradient(120% 120% at 100% 100%, rgba(111, 60, 255, 0.22) 0%, #121212 50%, #121212 100%);
  border-color: rgba(111, 60, 255, 0.45);
}

.cyber-services7__icon {
  width: 80px;
  height: 80px;
  color: #fff;
  margin-bottom: 35px;
  display: inline-flex;
}

.cyber-services7__icon .cyber-services7__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cyber-services7__icon .cyber-services7__svg path {
  stroke: currentColor !important;
}

.cyber-services7__card-title {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 46px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-decoration: underline;
  margin-bottom: 35px;
}

@media only screen and (max-width: 1919px) {
  .cyber-services7__card-title {
    font-size: 25px;
    line-height: 1.1;
  }
}

.cyber-services7__card-text {
  color: var(--gray);
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 35px;
}

.cyber-services7__arrow {
  margin-top: auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.cyber-services7__arrow svg path {
  stroke: var(--black);
  transition: all 0.3s;
}

.cyber-services7__arrow:hover {
  background: #6f3cff;
  transform: translateY(-2px);
}

.cyber-services7__arrow:hover svg path {
  stroke: var(--white);
  transition: all 0.3s;
}

@media (max-width: 991.98px) {
  .cyber-services7__card {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .cyber-services7__card {
    padding: 22px 18px;
  }

  .cyber-services7__icon {
    width: 42px;
    height: 42px;
  }
}

.industries7 {
  background: #e7e7e7;
  color: #0f0f0f;
  position: relative;
  overflow: hidden;
}

.industries7__eyebrow {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 30px;
}

.industries7__title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-bottom: 45px;
}

@media only screen and (max-width: 1919px) {
  .industries7__title {
    font-size: 36px;
    line-height: 1.1;
  }
}

.industries7__lead {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--gray-two);
  margin-bottom: 45px;
}

.industries7__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: #4b20ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(75, 32, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industries7__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(75, 32, 255, 0.32);
}

.industries7__btn-icon {
  display: inline-grid;
  place-items: center;
}

.industries7__stats {
  margin-top: clamp(20px, 3vw, 32px);
}

.industries7__stat-card {
  position: relative;
  z-index: 6;
  background: #ececec;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 40px 30px;
}

.industries7__stat-card+.industries7__stat-card {
  margin-left: 0;
}

.industries7__stat-num {
  color: #000;
  font-family: var(--font_instr);
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  line-height: 70px;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .industries7__stat-num {
    font-size: 36px;
    line-height: 1.1;
  }
}

.industries7__stat-text {
  color: #3e3e3e;
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  line-height: 1.45;
}

.industries7__right {
  position: relative;
  padding: 130px 0px;
  border-radius: 10px;
  border: 2.5px solid rgba(255, 255, 255, 0);
  background: var(--white);
  box-shadow: -4px -4px 0 0 rgba(255, 255, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.industries7__right::before,
.industries7__right::after {
  content: "";
  position: absolute;
  inset: auto auto 0 50%;
  width: 120%;
  height: 130%;
  transform: translate(-40%, 0);
  background: radial-gradient(60% 60% at 30% 20%, rgba(11, 100, 255, 0.95), rgba(106, 60, 255, 0.9) 60%, rgba(106, 60, 255, 0) 70%), radial-gradient(55% 55% at 80% 85%, rgba(106, 60, 255, 0.95), rgba(11, 100, 255, 0.85) 60%, rgba(11, 100, 255, 0) 72%);
  filter: blur(6px);
  z-index: 0;
  border-radius: 50%;
}

.industries7__right::after {
  inset: 0 auto auto 40%;
  width: 130%;
  height: 140%;
  transform: translate(-25%, 0) rotate(8deg);
  opacity: 0.7;
}

.industries7__panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  padding: 60px;
  max-width: 755px;
  margin-left: auto;
}

.industries7__panel-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 25px;
}

.industries7__panel-desc {
  color: #555;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 60px;
}

@media (max-width: 991.98px) {

  .industries7__right::before,
  .industries7__right::after {
    opacity: 0.65;
    filter: blur(8px);
  }

  .industries7__panel {
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .industries7__title {
    font-size: 1.55rem;
  }

  .industries7__panel {
    max-width: 100%;
    padding: 25px;
  }

  .industries7__chart {
    gap: 10px;
    min-height: 180px;
  }

  .industries7__bar {
    width: 38px;
  }
}

.project-area7 {
  background: var(--primary);
}

.project-area7 .section-top {
  max-width: 1157px;
  margin: 0 auto 70px;
  text-align: center;
}

.project-area7__card {
  display: flex;
  justify-content: space-between;
  background: #111111;
  box-shadow: 8px 8px 10px 0 rgba(98, 98, 98, 0.1) inset;
  position: relative;
  gap: 20px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1199px) {
  .project-area7__card {
    flex-direction: column;
  }
}

.project-area7__card-content {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (max-width: 1919px) {
  .project-area7__card-content {
    padding: 25px;
  }
}

.project-area7__card-year {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 20px;
}

.project-area7__card-title {
  display: flex;
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1919px) {
  .project-area7__card-title {
    font-size: 30px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 767px) {
  .project-area7__card-title {
    font-size: 20px;
  }
}

.project-area7__card-title:hover {
  color: var(--purple);
}

.project-area7__card-desc {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  max-width: 450px;
  display: flex;
  margin-bottom: 210px;
}

@media only screen and (max-width: 1919px) {
  .project-area7__card-desc {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 50px;
  }
}

.project-area7__card-tags {
  display: flex;
  gap: 12px;
}

@media only screen and (max-width: 767px) {
  .project-area7__card-tags {
    flex-wrap: wrap;
  }
}

.project-area7__card-tag {
  background: #1c1c1c;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 14px;
}

.project-area7__card-thumb {
  position: relative;
  width: 50%;
}

@media only screen and (max-width: 1199px) {
  .project-area7__card-thumb {
    width: 100%;
  }
}

.project-area7__card-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.project-area7__card-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #000;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
}

.project-area7__card-btn:hover {
  background: #573cff;
  color: #fff;
}

.wp-area7 {
  background: #f5f5f5;
}

.wp-area7__thumb {
  position: relative;
}

.wp-area7 .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media only screen and (max-width: 1199px) {
  .wp-area7 .icon {
    width: 60px;
    height: 60px;
  }
}

.wp-area7__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

@media only screen and (max-width: 1919px) {
  .wp-area7__top {
    flex-direction: column;
  }
}

.wp-area7__top-right {
  max-width: 1272px;
}

.wp-area7__top-subtitle {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #573cff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.wp-area7__top-title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-bottom: 40px;
}

@media only screen and (max-width: 1919px) {
  .wp-area7__top-title {
    font-size: 36px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 767px) {
  .wp-area7__top-title {
    font-size: 25px;
  }
}

.wp-area7__top-buttons {
  display: flex;
  gap: 20px;
}

@media only screen and (max-width: 1919px) {
  .wp-area7__top-buttons {
    flex-wrap: wrap;
  }
}

.wp-area7__top-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.wp-area7__top-btn--primary {
  background-color: #573cff;
  color: #fff;
}

.wp-area7__top-btn--primary:hover {
  background-color: #3c2dbd;
}

.wp-area7__top-btn--dark {
  background-color: #000;
  color: #fff;
}

.wp-area7__top-btn--dark:hover {
  background-color: #333;
}

.wp-area7__card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 25px;
  text-align: left;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.wp-area7__card:hover {
  transform: translateY(-5px);
}

.wp-area7__card-step {
  display: inline-flex;
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 155.556% */
  letter-spacing: 1px;
  border: 1px solid #000;
  padding: 2px 12px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.wp-area7__card-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  /* 113.333% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .wp-area7__card-title {
    font-size: 20px;
  }
}

.wp-area7__card-desc {
  color: #555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  margin: 0;
  line-height: 1.6;
}

.testimonial-area7 {
  background: var(--black);
}

.testimonial-area7 .marque-section6 {
  margin-bottom: 130px;
  background: transparent;
  padding: 0;
  line-height: 1;
  padding-bottom: 58px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area7 .marque-section6 {
    margin-bottom: 0px;
  }
}

.testimonial-area7__card {
  position: relative;
  background: #101010;
  box-shadow: 8px 8px 10px 0 rgba(98, 98, 98, 0.1) inset;
  color: #fff;
  border-radius: 12px;
  padding: 60px 30px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-area7__card .icon {
  position: absolute;
  bottom: 37px;
  right: 30px;
}

.testimonial-area7__card-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-area7__card-rating-number {
  font-size: 1rem;
  font-weight: 600;
}

.testimonial-area7__card-rating-stars {
  color: #f5a623;
  font-size: 1rem;
}

.testimonial-area7__card-quote {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 160px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area7__card-quote {
    font-size: 17px;
    line-height: 1.1;
    margin-bottom: 50px;
  }
}

.testimonial-area7__card-author {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
}

.testimonial-area7__card-author-img img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonial-area7__card-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-area7__card-author-name {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  /* 150% */
  margin-bottom: 2px;
}

@media only screen and (max-width: 1919px) {
  .testimonial-area7__card-author-name {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5px;
  }
}

.testimonial-area7__card-author-position {
  color: #555;
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
}

@media only screen and (max-width: 1919px) {
  .testimonial-area7__card-author-position {
    font-size: 12px;
    line-height: 1.1;
  }
}

.cta-area7 {
  position: relative;
  background: var(--black);
  padding-bottom: 262px;
}

@media only screen and (max-width: 1399px) {
  .cta-area7 {
    padding-bottom: 250px;
  }
}

@media only screen and (max-width: 1199px) {
  .cta-area7 {
    padding-bottom: 200px;
  }
}

@media only screen and (max-width: 767px) {
  .cta-area7 {
    padding-bottom: 150px;
  }
}

.cta-area7__shape1 {
  position: absolute;
  bottom: -30%;
  left: 0;
  z-index: 1;
}

.cta-area7__shape2 {
  position: absolute;
  bottom: -30%;
  right: 0;
  z-index: 1;
}

.cta-area7__content {
  position: relative;
  z-index: 5;
  text-align: center;
}

.cta-area7__content-title {
  color: #fff;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin-bottom: 70px;
}

@media only screen and (max-width: 1919px) {
  .cta-area7__content-title {
    font-size: 36px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 1399px) {
  .cta-area7__content-title {
    font-size: 45px;
    line-height: 1.2;
  }
}

@media only screen and (max-width: 1199px) {
  .cta-area7__content-title {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .cta-area7__content-title {
    font-size: 28px;
    line-height: 1.2;
  }
}

.blog-area7 {
  background: #000;
  margin-top: -4px;
}

.blog-area7 .section-title {
  color: #fff;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media only screen and (max-width: 1919px) {
  .blog-area7 .section-title {
    font-size: 36px;
    line-height: 1.1;
  }
}

.blog-area7__card {
  background: #111;
  border-radius: 1rem;
  overflow: hidden;
  color: #fff;
  padding: 30px;
  box-shadow: 8px 8px 10px 0 rgba(98, 98, 98, 0.1) inset;
}

@media only screen and (max-width: 1919px) {
  .blog-area7__card {
    padding: 15px;
  }
}

.blog-area7__card-thumb {
  position: relative;
  border-radius: 10px;
}

.blog-area7__card-thumb img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.blog-area7__card-thumb .blog-area7__card-date {
  width: 84px;
  height: 84px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 1rem;
  right: 1rem;
  color: #000;
  text-align: center;
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  background: #b7ff00;
  margin-bottom: -50px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

@media only screen and (max-width: 1199px) {
  .blog-area7__card-thumb .blog-area7__card-date {
    font-size: 12px;
  }
}

.blog-area7__card-content {
  padding-top: 35px;
}

.blog-area7__card-content .blog-area7__card-category {
  display: inline-flex;
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 25px;
}

.blog-area7__card-content .blog-area7__card-title {
  display: block;
  color: #fff;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1919px) {
  .blog-area7__card-content .blog-area7__card-title {
    font-size: 20px;
    line-height: 1.1;
  }
}

.blog-area7__card-content .blog-area7__card-title:hover {
  text-decoration: underline;
}

.blog-area7__card-content .blog-area7__card-desc {
  color: var(--gray);
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 35px;
}

.blog-area7__card-content .blog-area7__card-meta {
  display: inline-flex;
  gap: 50px;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 20px;
  background: var(--black);
  border-radius: 10px;
}

@media only screen and (max-width: 767px) {
  .blog-area7__card-content .blog-area7__card-meta {
    gap: 15px;
  }
}

.blog-area7__card-content .blog-area7__card-meta .blog-area7__card-link {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
}

@media only screen and (max-width: 1919px) {
  .blog-area7__card-content .blog-area7__card-meta .blog-area7__card-link {
    font-size: 14px;
    line-height: 1.1;
  }
}

.blog-area7__card-content .blog-area7__card-meta .blog-area7__card-link:hover {
  text-decoration: underline;
}

.connect-area7 {
  background: linear-gradient(180deg, #000 0%, #111 100%);
  padding: 45px 0;
}

.connect-area7__top {
  text-transform: uppercase;
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 130px;
}

@media only screen and (max-width: 991px) {
  .connect-area7__top {
    flex-wrap: wrap;
    justify-content: center !important;
  }
}

.connect-area7__subtitle {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 30px;
}

.connect-area7__title {
  font-family: var(--font_kanit);
  font-weight: 600;
  font-size: 200px;
  line-height: 180px;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1919px) {
  .connect-area7__title {
    font-size: 190px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 1399px) {
  .connect-area7__title {
    font-size: 150px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 1199px) {
  .connect-area7__title {
    font-size: 120px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 991px) {
  .connect-area7__title {
    font-size: 70px;
    line-height: 1.1;
  }
}

.connect-area7__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  text-decoration: none;
  width: 220px;
  height: 220px;
  border-width: 1px;
  letter-spacing: 1px;
  transition: 0.3s;
}

.connect-area7__btn:hover {
  background: #b7ff00;
  color: #000;
  border-color: #b7ff00;
}

.connect-area7__bottom {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 130px;
}

.connect-area7__bottom a {
  color: #fff;
  text-decoration: none;
}

.connect-area7__bottom a:hover {
  text-decoration: underline;
}

.connect-area7__social {
  gap: 15px;
}

@media only screen and (max-width: 991px) {
  .connect-area7__social {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
}

/* =========  Choose Us (BEM + nested SCSS)  ========= */
.choose-us {
  position: relative;
  margin-bottom: -20px;
  color: #e8e9ea;
  background: radial-gradient(60% 120% at 10% 10%, rgba(108, 59, 255, 0.25), rgba(108, 59, 255, 0) 60%), radial-gradient(70% 100% at 90% 20%, rgba(83, 220, 255, 0.15), rgba(83, 220, 255, 0) 60%), linear-gradient(180deg, #0b0b11, #11111a);
}

.choose-us__eyebrow {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #b4f914;
  margin-bottom: 30px;
  opacity: 0.9;
}

.choose-us__eyebrow::before {
  content: "// ";
  color: #b4f914;
}

.choose-us__title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 50px;
  line-height: 60px;
  color: var(--white);
  margin-bottom: 45px;
  text-align: start;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media only screen and (max-width: 1919px) {
  .choose-us__title {
    font-size: 36px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 1399px) {
  .choose-us__title {
    font-size: 40px;
    line-height: 1.2;
  }
}

@media only screen and (max-width: 1199px) {
  .choose-us__title {
    font-size: 38px;
    line-height: 1.2;
  }
}

@media only screen and (max-width: 767px) {
  .choose-us__title {
    font-size: 30px;
    line-height: 1.2;
  }
}

.choose-us__desc {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #9aa0a6;
  margin-bottom: 45px;
}

.choose-us__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 12px 18px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.78rem;
  color: #e8e9ea;
  text-decoration: none;
  background: linear-gradient(90deg, #3b82f6, #6c3bff);
  box-shadow: 0 8px 24px rgba(108, 59, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.choose-us__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.choose-us__cta:active {
  transform: translateY(0);
}

/* =========  Custom Accordion  ========= */
.choose-acc {
  display: grid;
  gap: 14px;
}

.choose-acc__item {
  background: #151526;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  /* add active state when collapse opens (no JS needed) */
}

.choose-acc__item.is-active,
.collapse.show+.choose-acc__item,
.choose-acc__item:has(.collapse.show) {
  background: linear-gradient(180deg, rgba(108, 59, 255, 0.22), rgba(124, 77, 255, 0.22));
  border-color: rgba(108, 59, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(108, 59, 255, 0.35) inset, 0 8px 32px rgba(108, 59, 255, 0.35);
}

.choose-acc__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 35px;
  background: var(--purple);
  box-shadow: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  /* Icon (plus/minus) */
}

@media only screen and (max-width: 767px) {
  .choose-acc__header {
    padding: 12px;
  }
}

.choose-acc__header .choose-acc__label {
  color: var(--white);
}

.choose-acc__header.collapsed {
  background: var(--gray-three);
}

.choose-acc__header.collapsed .choose-acc__label {
  color: var(--black);
}

.choose-acc__header.collapsed .choose-acc__icon {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background: transparent;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.25s ease;
  color: var var(--white);
  /* turn to minus when expanded */
}

.choose-acc__header.collapsed .choose-acc__icon::before,
.choose-acc__header.collapsed .choose-acc__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 30px;
  height: 2px;
  color: var(--white);
  border-radius: 1px;
}

.choose-acc__header.collapsed .choose-acc__icon::after {
  transform: rotate(90deg);
}

.choose-acc__header[aria-expanded=true] .choose-acc__header.collapsed .choose-acc__icon {
  background: rgba(108, 59, 255, 0.35);
  transform: rotate(180deg);
}

.choose-acc__header[aria-expanded=true] .choose-acc__header.collapsed .choose-acc__icon::after {
  opacity: 0;
}

.choose-acc__header:focus {
  outline: 0;
  box-shadow: none;
}

.choose-acc__header .choose-acc__icon {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background: transparent;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.25s ease;
  color: var(--white);
}

.choose-acc__header .choose-acc__icon::before,
.choose-acc__header .choose-acc__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 30px;
  height: 2px;
  background: var(--black);
  border-radius: 1px;
}

.choose-acc__header .choose-acc__icon::after {
  transform: rotate(90deg);
}

.choose-acc__label {
  color: var(--black);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
}

@media only screen and (max-width: 1919px) {
  .choose-acc__label {
    font-size: 20px;
    line-height: 1.1;
  }
}

@media only screen and (max-width: 1399px) {
  .choose-acc__label {
    font-size: 25px;
    line-height: 1.2;
  }
}

@media only screen and (max-width: 1199px) {
  .choose-acc__label {
    font-size: 20px;
    line-height: 1.2;
  }
}

@media only screen and (max-width: 767px) {
  .choose-acc__label {
    font-size: 18px;
    line-height: 1.2;
  }
}

.choose-acc__body {
  padding: 0 35px 25px;
  margin-top: -6px;
  background: var(--purple);
  box-shadow: none;
  border: 0;
  position: relative;
}

/* =========  Small screens tweaks  ========= */
@media (max-width: 575.98px) {
  .choose-us__title {
    word-break: keep-all;
  }

  .choose-us__desc {
    margin-bottom: 22px;
  }
}

/* === Hero Section (Home 08) === */
.intro-area8 {
  padding: 200px 0 100px;
  background: #f6f0e9;
}

.intro-area8__shape1 {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.intro-area8__shape2 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 50%;
  transform: translateX(-50%);
}

.intro-area8__shape3 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

.intro-area8__shape4 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

.intro-area8__shape5 {
  position: absolute;
  z-index: 1;
  top: 338px;
  left: 80px;
}

@media only screen and (max-width: 1919px) {
  .intro-area8__shape5 {
    left: 0px;
  }
}

@media only screen and (max-width: 1199px) {
  .intro-area8__shape5 {
    display: none;
  }
}

.intro-area8__shape6 {
  position: absolute;
  z-index: 1;
  top: 338px;
  right: 72px;
}

@media only screen and (max-width: 1919px) {
  .intro-area8__shape6 {
    right: 0px;
  }
}

@media only screen and (max-width: 1199px) {
  .intro-area8__shape6 {
    display: none;
  }
}

.intro-area8__review {
  padding: 5px 15px 5px 5px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border-radius: 90px;
  background: #fff;
  margin-bottom: 30px;
}

.intro-area8__review-thumbs {
  display: inline-flex;
  align-items: center;
  margin-left: 15px;
}

.intro-area8__review-thumbs img {
  margin-left: -15px;
}

.intro-area8__review-text {
  color: #000;
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

.intro-area8__content {
  position: relative;
  z-index: 5;
  text-align: center;
}

.intro-area8__title {
  color: #000;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 82px;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1399px) {
  .intro-area8__title {
    font-size: 50px;
    line-height: 1.3;
  }
}

.intro-area8__title span {
  color: #573cff;
}

.intro-area8__text {
  color: #000;
  text-align: center;
  font-family: var(--font_kanit);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  max-width: 753px;
  margin: 0 auto 30px;
}

.intro-area8__link {
  display: block;
  margin-top: 40px;
  color: #000;
  text-align: center;
  font-family: var(--font_kanit);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.intro-area8__features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 50px;
}

@media only screen and (max-width: 767px) {
  .intro-area8__features {
    flex-wrap: wrap;
    gap: 15px;
  }
}

.intro-area8__feature {
  display: inline-flex;
  padding: 5px 25px;
  align-items: center;
  gap: 12px;
  border-radius: 90px;
  background: #fff;
}

.about-area8__thumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-area8__title {
  color: #000;
  font-family: var(--font_instr);
  text-align: center;
  font-style: normal;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  margin-bottom: 25px;
  margin-top: 40px;
}

@media only screen and (max-width: 1399px) {
  .about-area8__title {
    font-size: 35px;
    line-height: 1.3;
  }
}

.about-area8__project {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
  padding: 45px;
  border-radius: 10px;
  background: var(--white);
}

@media only screen and (max-width: 767px) {
  .about-area8__project {
    padding: 25px;
    flex-direction: column-reverse;
    gap: 30px;
  }
}

.about-area8__project-thumb {
  flex: none;
}

@media only screen and (max-width: 767px) {
  .about-area8__project-thumb {
    flex: auto;
    width: 100%;
  }
}

.about-area8__project img {
  border-radius: 10px;
}

@media only screen and (max-width: 767px) {
  .about-area8__project img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.about-area8__project-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 30px;
}

.about-area8__project-text {
  color: #555;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.about-area8__feature {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

@media only screen and (max-width: 767px) {
  .about-area8__feature {
    flex-direction: column;
  }
}

.about-area8__feature-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  margin-top: 45px;
  margin-bottom: 45px;
}

.about-area8__feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #41f681;
}

.about-area8__feature-text {
  color: #000;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  max-width: 120px;
}

.about-area8__counters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

@media only screen and (max-width: 767px) {
  .about-area8__counters {
    flex-direction: column;
    gap: 10px;
  }
}

.about-area8__counter {
  margin-right: 30px;
  margin-bottom: 30px;
  max-width: 308px;
  padding: 38px;
  border-radius: 15px;
  background: linear-gradient(109deg, #f3ff0a 4.72%, #fff 100%);
}

.about-area8__counter-number {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}

.about-area8__counter-text {
  color: #000;
  font-family: var(--font_kanit);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}

.about-area8__counter-features {
  border-radius: 10px;
  padding: 38px 24px;
  background: var(--white);
  max-width: 300px;
}

.about-area8__counter-feature {
  padding: 8px 25px 8px 8px;
  border-radius: 90px;
  background: #fff;
  box-shadow: 4px 6px 15.1px 0 rgba(5, 0, 36, 0.2);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  display: inline-flex;
  color: #000;
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}

.about-area8__counter-feature span {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #573cff;
  border-radius: 50%;
}

.about-area8__counter-two {
  padding: 44px 15px 50px 49px;
  background: var(--white);
  border-radius: 16px;
  width: 320px;
}

.about-area8__counter-three {
  padding: 44px 68px 70px 49px;
  border-radius: 15px;
  background: linear-gradient(137deg, #41f681 3.6%, #fff 100%);
  margin-left: 30px;
  margin-top: 30px;
}

.about-area8__counter-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}

.about-area8__counter-desc {
  color: #000;
  font-family: var(--font_kanit);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}

.service-area8 {
  background: var(--black);
}

.service-area8__card {
  padding: 60px 34px;
  transition: all 0.3s;
}

.service-area8__card-icon {
  margin-bottom: 30px;
}

.service-area8__card-title {
  color: #fff;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 25px;
  display: block;
}

@media only screen and (max-width: 1399px) {
  .service-area8__card-title {
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 15px;
  }
}

.service-area8__card-title:hover {
  color: var(--purple);
}

.service-area8__card-text {
  color: var(--gray);
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 25px;
}

.service-area8__card-link {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
}

.service-area8__card-link svg path {
  stroke: var(--black);
}

.service-area8__card:hover,
.service-area8__card.active {
  background: var(--white);
}

.service-area8__card:hover .service-area8__card-title,
.service-area8__card.active .service-area8__card-title {
  color: var(--black);
}

.service-area8__card:hover .service-area8__card-link,
.service-area8__card.active .service-area8__card-link {
  background: var(--purple);
}

.service-area8__card:hover .service-area8__card-link svg path,
.service-area8__card.active .service-area8__card-link svg path {
  stroke: var(--white);
}

.section-title {
  color: var(--white);
  text-align: center;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px;
  max-width: 980px;
  margin: 0 auto 70px;
}

@media only screen and (max-width: 1399px) {
  .section-title {
    font-size: 40px;
    line-height: 1.3;
  }
}

@media only screen and (max-width: 1199px) {
  .section-title {
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 30px;
  }
}

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

.overview-area8 {
  padding: 90px 0;
}

.overview-area8__thumbs {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
}

.overview-area8__thumbs-one {
  border-radius: 16px;
}

.overview-area8__thumbs-two {
  margin-top: 446px;
  border-radius: 16px;
}

.testimonial-area8 {
  background: var(--black);
}

/* testimonial-area8.scss */
/* BEM-nesting style, keep your variables (e.g. --font_instr, --font_kanit) */
.testimonial-area8 .testimonial-area8__active {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  overflow: visible;
  margin-left: -450px;
}

@media only screen and (max-width: 1399px) {
  .testimonial-area8 .testimonial-area8__active {
    margin-left: 0;
  }
}

.testimonial-area8 .testimonial-area8__active .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.testimonial-area8 .testimonial-area8__active .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto;
}

.testimonial-area8__card {
  position: relative;
  border-radius: 16px;
  background: #f3ece6;
  padding: 40px;
  /* reduced from 60 to help mobile */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-area8__aside {
  position: relative;
  z-index: 9;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0;
}

@media (min-width: 768px) {
  .testimonial-area8__aside {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 100%;
    padding: 0;
  }
}

.testimonial-area8__person {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .testimonial-area8__person {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

.testimonial-area8__name {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.testimonial-area8__role {
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

@media (min-width: 768px) {
  .testimonial-area8__role {
    margin-top: 0.15rem;
  }
}

.testimonial-area8__avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-area8__avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -o-object-fit: cover;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.testimonial-area8__divider {
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(15, 23, 42, 0.08);
  margin: 0 auto;
}

.testimonial-area8__divider--hr {
  border: none;
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0.75rem 0 1rem;
}

.testimonial-area8__body {
  position: relative;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-area8__rating {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 30px;
}

.testimonial-area8__score {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.testimonial-area8__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
}

.testimonial-area8__label {
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
}

.testimonial-area8__stars {
  display: inline-flex;
  gap: 0.25rem;
}

.testimonial-area8__stars .testimonial-area8__star {
  width: 18px;
  height: 18px;
  fill: #ff9f0a;
}

.testimonial-area8__text {
  margin: 0;
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.testimonial-area8__quote {
  display: inline-flex;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: clamp(2rem, 8vw, 6rem);
  color: rgba(0, 0, 0, 0.06);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.testimonial-area8__quote svg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

@media (min-width: 768px) {
  .testimonial-area8 .testimonial-slider8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1200px) {
  .testimonial-area8 .testimonial-slider8 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .testimonial-area8__card {
    padding: 48px;
  }

  .testimonial-area8__score {
    font-size: 70px;
  }

  .testimonial-area8__text {
    font-size: 26px;
  }
}

.integration-area8__wrap {
  border-radius: 25px;
  background: #fefcf9;
}

.integration-area8__wrap.section-title {
  color: var(--black);
}

.blog-area8__card {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 10px;
}

@media only screen and (max-width: 1919px) {
  .blog-area8__card {
    gap: 10px;
    flex-direction: column;
  }
}

.blog-area8__card-thumb {
  height: 500px;
  flex: none;
  border-radius: 10px;
}

@media only screen and (max-width: 1919px) {
  .blog-area8__card-thumb {
    width: 100%;
    padding: 25px;
  }
}

.blog-area8__card-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.blog-area8__card-content {
  padding: 35px 35px 35px 35px;
  background: var(--white);
  border-radius: 10px;
}

@media only screen and (max-width: 1399px) {
  .blog-area8__card-content {
    padding: 15px;
  }
}

.blog-area8__card-date {
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 35px;
}

.blog-area8__card-title {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}

.blog-area8__card-desc {
  margin-top: 35px;
  color: #555;
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 120px;
}

.blog-area8__card-link {
  color: #573cff;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  display: flex;
  align-items: center;
  gap: 10px;
}

.whychoose-area8 .section-title {
  margin-bottom: 60px !important;
}

.whychoose-area8__wrap {
  border-radius: 10px 0 0 10px;
  background: #fefcf9;
  padding-left: 120px;
}

@media only screen and (max-width: 1399px) {
  .whychoose-area8__wrap {
    padding-left: 20px;
  }
}

.whychoose-area8__accordion .accordion-item {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.whychoose-area8__accordion .accordion-item .accordion-button {
  background: #f5f3ef;
  color: #000;
  font-family: var(--font_instr);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  color: #000;
  border: none;
  box-shadow: none;
  padding: 33px 1.5rem;
}

@media only screen and (max-width: 1399px) {
  .whychoose-area8__accordion .accordion-item .accordion-button {
    font-size: 15px;
    line-height: 1.3;
  }
}

.whychoose-area8__accordion .accordion-item .accordion-button.collapsed::after {
  content: "+";
  background: none;
  font-size: 3rem;
  color: #000;
  transform: none;
  line-height: 0.5;
}

.whychoose-area8__accordion .accordion-item .accordion-button::after {
  content: "-";
  background: none;
  font-size: 3rem;
  color: #000;
  transform: none;
  line-height: 0.5;
}

.whychoose-area8__accordion .accordion-item .accordion-collapse .accordion-body {
  background: #573cff;
  color: #fff;
  padding: 1.5rem;
}

.whychoose-area8__accordion .accordion-item .accordion-collapse .accordion-body .whychoose-area8__item-desc {
  color: #fff;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 155.556% */
  margin-bottom: 1rem;
}

@media only screen and (max-width: 1399px) {
  .whychoose-area8__accordion .accordion-item .accordion-collapse .accordion-body .whychoose-area8__item-desc {
    font-size: 14px;
    line-height: 1.3;
  }
}

.whychoose-area8__accordion .accordion-item .accordion-collapse .accordion-body .whychoose-area8__item-link {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.2rem;
}

.whychoose-area8__image {
  margin-right: -130px;
  position: relative;
}

@media only screen and (max-width: 1399px) {
  .whychoose-area8__image {
    margin-right: 0;
  }
}

.whychoose-area8__image img {
  border-radius: 0.75rem;
  width: 100%;
  display: block;
}

.whychoose-area8__image-two {
  position: absolute;
  bottom: 60px;
  right: 75px;
}

.pricing-area8 .section-title {
  margin-bottom: 60px;
}

.pricing-area8__card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  text-align: start;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.pricing-area8__card--bg-active {
  background: #41f681;
}

.pricing-area8__card--bg-active .pricing-area8__card-btn {
  background: var(--white);
  color: var(--black);
}

.pricing-area8__card-header {
  margin-bottom: 35px;
}

.pricing-area8__card-header .pricing-area8__card-title {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px;
  margin-bottom: 25px;
}

.pricing-area8__card-header .pricing-area8__card-subtitle {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.pricing-area8__card-price {
  margin-bottom: 0.5rem;
}

.pricing-area8__card-price .pricing-area8__amount {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 82px;
}

@media only screen and (max-width: 1399px) {
  .pricing-area8__card-price .pricing-area8__amount {
    font-size: 50px;
    line-height: 1.3;
  }
}

@media only screen and (max-width: 1199px) {
  .pricing-area8__card-price .pricing-area8__amount {
    font-size: 30px;
    line-height: 1.3;
  }
}

.pricing-area8__card-price .pricing-area8__period {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 82px;
  margin-left: 0.2rem;
}

.pricing-area8__card-bill {
  font-family: var(--font_instr);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  margin-bottom: 35px;
}

.pricing-area8__card-btn {
  display: inline-block;
  text-align: center;
  background: #000;
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  color: #fff;
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 2rem;
  border-radius: 90px;
  border: 1px solid transparent;
}

.pricing-area8__card-btn:hover {
  background: var(--white);
  border: 1px solid var(--gray);
}

.pricing-area8__features {
  text-align: left;
}

.pricing-area8__features-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--black);
  padding-bottom: 1.2rem;
}

.pricing-area8__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 35px;
}

.pricing-area8__features-list .pricing-area8__features-item {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 20px;
  color: #000;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.pricing-area8__features-list .pricing-area8__features-item::before {
  content: "■";
  position: absolute;
  left: 0;
  color: #000;
  font-size: 0.6rem;
  top: 0px;
}

.feature-area8__wrap {
  background: #fefcf9;
  margin-left: -145px;
}

@media only screen and (max-width: 1399px) {
  .feature-area8__wrap {
    margin-left: 0;
  }
}

.feature-area8__thumb {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 0 10px 10px 0;
}

.feature-area8__thumb img {
  height: 100%;
  width: 100%;
  border-radius: 0 10px 10px 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.feature-area8__thumb-two {
  position: absolute;
  bottom: 60px;
  left: 75px;
}

.feature-area8__thumb-two img {
  border-radius: 10px;
}

.feature-area8__content {
  padding: 120px;
  border-radius: 0 10px 10px 0;
  background: #fefcf9;
}

@media only screen and (max-width: 991px) {
  .feature-area8__content {
    padding: 25px;
  }
}

.feature-area8__item {
  margin-bottom: 35px;
}

.feature-area8__item:last-child {
  margin-bottom: 0;
}

.feature-area8__item-title {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  margin-bottom: 25px;
}

.feature-area8__item-text {
  color: #555;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

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

.cta-area8 {
  position: relative;
  margin-bottom: -250px;
  z-index: 7;
}

.cta-area8__wrap {
  border-radius: 25px;
  color: #fff;
  text-align: center;
}

.cta-area8__members {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.cta-area8__members-img {
  width: 30px;
  border-radius: 50%;
}

.cta-area8__title {
  color: #fff;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 60px;
  /* 120% */
  margin-bottom: 2rem;
}

@media only screen and (max-width: 1399px) {
  .cta-area8__title {
    font-size: 20px;
    line-height: 1.3;
  }
}

.cta-area8__form {
  position: relative;
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 3rem;
  overflow: hidden;
}

@media only screen and (max-width: 575px) {
  .cta-area8__form {
    max-width: 280px;
    height: 60px;
  }
}

.cta-area8__form>.cta-area8__input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  outline: none;
}

@media only screen and (max-width: 575px) {
  .cta-area8__form>button {
    position: absolute;
    top: 5px;
    right: 5px;
  }
}

.footer-area8 {
  background: #000;
  color: #bbb;
  padding: 371px 0 2rem;
}

.footer-area8__logo {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.footer-area8__desc {
  color: #999;
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 294px;
}

.footer-area8__social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #333;
}

.footer-area8__social-link:hover {
  color: var(--white);
  background: var(--purple);
}

.footer-area8__heading {
  color: var(--white);
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 30px;
}

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

.footer-area8__list .footer-area8__item {
  margin-bottom: 0.5rem;
}

.footer-area8__list .footer-area8__item a {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.footer-area8__list .footer-area8__item a:hover {
  color: var(--white);
}

.footer-area8__app-btn {
  background: #222;
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  max-width: 191px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font_kanit);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.footer-area8__app-btn:hover {
  background: var(--purple);
  color: var(--white);
}

.footer-area8__bottom {
  border-top: 1px solid var(--border-color-one);
  font-size: 0.8rem;
  color: #666;
  margin-top: 120px;
  padding-top: 35px;
  color: #fff;
  text-align: center;
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 155.556% */
}

/* === portfolio-grid (portfolio-grid) === */
.portfolio-page {
  background: var(--gray-three);
}

.portfolio-page__top {
  padding: 30px 45px;
  border-radius: 10px;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  margin-bottom: 120px;
}

@media only screen and (max-width: 1199px) {
  .portfolio-page__top {
    padding: 20px 30px;
    margin-bottom: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-page__top {
    padding: 20px 13px;
    margin-bottom: 70px;
  }
}

.portfolio-page__top-item-title {
  color: #000;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

@media only screen and (max-width: 1199px) {
  .portfolio-page__top-item-title {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-page__top-item-title {
    font-size: 14px;
  }
}

.portfolio-page__top-item-title2 {
  color: #555;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media only screen and (max-width: 1199px) {
  .portfolio-page__top-item-title2 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-page__top-item-title2 {
    font-size: 14px;
  }
}

.portfolio-page__card-thumb {
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-page__card-thumb {
    margin-bottom: 13px;
  }
}

.portfolio-page__card-thumb img {
  border-radius: 10px;
  max-width: 100%;
}

.portfolio-page__card-content-title {
  margin-bottom: 8px;
}

.portfolio-page__card-content-title a {
  color: #000;
  font-family: var(--font_instr);
  font-size: 30px;
  display: block;
  font-style: normal;
  font-weight: 600;
  line-height: 133.333%;
}

@media only screen and (max-width: 1919px) {
  .portfolio-page__card-content-title a {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-page__card-content-title a {
    font-size: 25px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-page__card-content-title a {
    font-size: 22px;
  }
}

.portfolio-page__card-content-post {
  display: flex;
  gap: 20px;
}

.portfolio-page__card-content-post-date {
  color: #555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
  list-style: none;
}

.portfolio-list__card {
  position: relative;
  overflow: hidden;
}

.portfolio-list__card-thumb {
  position: relative;
  transition: all 0.4s ease-in-out;
}

.portfolio-list__card-thumb img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.portfolio-list__card-info {
  display: flex;
  justify-content: space-between;
}

.portfolio-list__card-content {
  position: absolute;
  left: 25%;
  bottom: 0%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease-in-out;
  padding: 40px 34px;
  border-radius: 10px;
  background: #FFF;
  gap: 200px;
  display: flex;
  justify-content: space-between;
  z-index: 9;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

@media only screen and (max-width: 1919px) {
  .portfolio-list__card-content {
    left: 31%;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-list__card-content {
    padding: 30px 30px;
    gap: 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-content {
    padding: 24px 20px;
    gap: 60px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-content {
    padding: 20px 16px;
    gap: 20px;
    left: 35%;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-list__card-content {
    padding: 16px 16px;
    gap: 10px;
    left: 35%;
  }
}

.portfolio-list__card-content-post-date {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  list-style: none;
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-content-post-date {
    font-size: 15px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-content-post-date {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-list__card-content-post-date {
    font-size: 12px;
  }
}

.portfolio-list__card-content-items {
  position: relative;
}

.portfolio-list__card-content-items::before {
  position: absolute;
  content: "";
  background: #000;
  width: 170px;
  height: 1px;
  right: 104%;
  top: 16%;
}

@media only screen and (max-width: 1399px) {
  .portfolio-list__card-content-items::before {
    width: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-content-items::before {
    width: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-content-items::before {
    display: none;
  }
}

.portfolio-list__card-content-items-title a {
  color: #000;
  font-family: var(--font_instr);
  font-size: 36px;
  display: block;
  font-style: normal;
  font-weight: 600;
  line-height: 127.778%;
}

@media only screen and (max-width: 1399px) {
  .portfolio-list__card-content-items-title a {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-content-items-title a {
    font-size: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-content-items-title a {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-list__card-content-items-title a {
    font-size: 8px;
  }
}

.portfolio-list__card-content-items-subtitle {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-top: 6px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-list__card-content-items-subtitle {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-content-items-subtitle {
    font-size: 14px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-content-items-subtitle {
    font-size: 13px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-list__card-content-items-subtitle {
    font-size: 8px;
  }
}

.portfolio-list__card-link {
  position: absolute;
  right: 0%;
  bottom: 0%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  .portfolio-list__card-link {
    right: -7%;
    bottom: -15%;
  }
}

.portfolio-list__card-link-list {
  width: 179px;
  height: 179px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50%;
  z-index: 9;
  color: #000;
  font-family: var(--font_instr);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 141.667%;
}

@media only screen and (max-width: 1919px) {
  .portfolio-list__card-link-list {
    width: 150px;
    height: 150px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-list__card-link-list {
    width: 120px;
    height: 120px;
    font-size: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-list__card-link-list {
    width: 100px;
    height: 100px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-list__card-link-list {
    width: 70px;
    height: 70px;
    font-size: 9px;
  }
}

.portfolio-list__card:hover .portfolio-list__card-content {
  transition: all 0.4s ease-in-out;
  visibility: visible;
  opacity: 1;
}

.portfolio-list__card:hover .portfolio-list__card-link {
  transition: all 0.4s ease-in-out;
  visibility: visible;
  opacity: 1;
}

.portfolio-details {
  padding: 200px 0px 120px;
  background-color: #F0F2F4;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details {
    padding: 130px 0px 100px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details {
    padding: 130px 0px 100px;
  }
}

@media only screen and (max-width: 575px) {
  .portfolio-details {
    padding: 120px 0px 90px;
  }
}

.portfolio-details__top {
  color: #101010;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 72px;
  line-height: 82px;
  letter-spacing: 0%;
  text-align: center;
  margin-bottom: 40px;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__top {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__top {
    font-size: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__top {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-details__top {
    font-size: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .portfolio-details__top {
    font-size: 27px;
  }
}

.portfolio-details__items {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__items {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.portfolio-details__items-content {
  border-top: 1px dashed;
  border-left: 1px dashed;
  padding: 15px 15px;
}

.portfolio-details__items-content-subtitle {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
  display: block;
  line-height: 30px;
  letter-spacing: 0%;
  margin-bottom: 16px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__items-content-subtitle {
    margin-bottom: 10px;
    font-size: 18px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__items-content-subtitle {
    margin-bottom: 10px;
    font-size: 16px;
  }
}

.portfolio-details__items-content-title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__items-content-title {
    margin-bottom: 10px;
    font-size: 20px;
  }
}

.portfolio-details__thumb img {
  max-width: 100%;
}

.portfolio-details__info {
  padding: 80px 0px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info {
    padding: 60px 0px;
  }
}

.portfolio-details__info-left {
  position: relative;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  color: #000000;
  line-height: 28px;
  letter-spacing: 0%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info-left {
    font-size: 16px;
  }
}

.portfolio-details__info-left::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 8px;
  left: -20px;
  background-color: #000000;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__info-left::before {
    display: none;
  }
}

.portfolio-details__info-right-title {
  font-family: Instrument Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  color: #000000;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info-right-title {
    margin-bottom: 20px;
    font-size: 30px;
  }
}

.portfolio-details__info-right-subtitle1 {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-bottom: 30px;
}

.portfolio-details__info-right-subtitle2 {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-bottom: 30px;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 {
  padding: 20px 0px;
  background: transparent;
  overflow: hidden;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-header {
  margin: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button {
  position: relative;
  font-family: "Instrument Sans";
  font-size: 24px;
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button {
    font-size: 17px;
  }
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button::after {
  content: "+";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  border: none;
  background: transparent;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button:not(.collapsed)::after {
  content: "-";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  border: none;
  background: transparent;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  transition: all 0.3s;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button.collapsed {
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  overflow: hidden;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button.collapsed {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button.collapsed {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button.collapsed {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-button.collapsed {
    font-size: 17px;
  }
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-body {
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  padding-top: 15px;
  padding-bottom: 20px;
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-body p {
  color: #555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-body p {
    font-size: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-body p {
    font-size: 16px;
  }
}

.portfolio-details__info-right .accordion2 .global-accordion-item2 .global-accordion-collapse.show {
  border-radius: 4px;
}

.portfolio-details__thumb2 {
  height: 100%;
}

.portfolio-details__thumb2 img {
  max-width: 100%;
  height: 100%;
  border-radius: 20px;
}

.portfolio-details-wrapper {
  padding: 60px 0px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details-wrapper {
    padding: 40px 0px;
  }
}

.portfolio-details-wrapper__title {
  position: relative;
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details-wrapper__title {
    font-size: 16px;
  }
}

.portfolio-details-wrapper__title::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 10px;
  left: -20px;
  background-color: #000000;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details-wrapper__title::before {
    display: none;
  }
}

.portfolio-details-info2 {
  padding: 0px 0px 60px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details-info2 {
    padding: 0px 0px 40px;
  }
}

.portfolio-details__content-title {
  font-family: Instrument Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__content-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__content-title {
    font-size: 25px;
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__content-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.portfolio-details__content-subtitle1 {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__content-subtitle1 {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

.portfolio-details__content-subtitle2 {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__content-subtitle2 {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

.portfolio-details__thumb3 {
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__thumb3 {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__thumb3 {
    margin-bottom: 20px;
  }
}

.portfolio-details__thumb3 img {
  border-radius: 20px;
  max-width: 100%;
}

.portfolio-details__link {
  display: flex;
  gap: 20px;
  justify-content: center;
  text-align: center;
}

.portfolio-details__link-items {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  border-radius: 101px;
  border: 1px solid #000000;
  width: 200px;
  height: 200px;
  top: 4872px;
  left: 750px;
  border-width: 1px;
}

@media only screen and (max-width: 1919px) {
  .portfolio-details__link-items {
    width: 150px;
    height: 150px;
  }
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__link-items {
    width: 100px;
    height: 100px;
  }
}

.portfolio-details__link-items:hover {
  background-color: #41F681;
  border: none;
}

.portfolio-details__link-items .button {
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .portfolio-details__link-items .button {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .portfolio-details__link-items .button {
    font-size: 14px;
  }
}

.portfolio-details__link-items .icon {
  margin-top: 15px;
}

.portfolio-details__link-items .icon svg {
  display: flex;
  text-align: center;
  justify-items: center;
  margin: 0 auto;
}

/* === Team-page (team-page) === */
.team-page__title {
  color: #000;
  font-family: Thunder;
  font-size: 420px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  line-height: 95.238%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .team-page__title {
    font-size: 318px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-page__title {
    font-size: 222px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-page__title {
    font-size: 165px;
  }
}

@media only screen and (max-width: 991px) {
  .team-page__title {
    font-size: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .team-page__title {
    font-size: 127px;
  }
}

.team-page__card {
  position: relative;
}

.team-page__card-title {
  position: relative;
  color: #000;
  font-family: Kanit;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 116.667%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .team-page__card-title {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-page__card-title {
    font-size: 20px;
  }
}

.team-page__card-title::before {
  position: absolute;
  content: "";
  background: #000;
  width: 90px;
  height: 1px;
  top: 44%;
  right: 40%;
}

@media only screen and (max-width: 1919px) {
  .team-page__card-title::before {
    right: 15%;
  }
}

@media only screen and (max-width: 1399px) {
  .team-page__card-title::before {
    right: 8%;
    width: 70px;
  }
}

.team-page__card-content-title {
  color: #000;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  margin-bottom: 22px;
}

@media only screen and (max-width: 1399px) {
  .team-page__card-content-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .team-page__card-content-title {
    font-size: 14px;
    margin-bottom: 16px;
  }
}

.team-page__card-content-name {
  color: #000;
  font-family: var(--font_instr);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  margin-bottom: 7px;
}

@media only screen and (max-width: 1399px) {
  .team-page__card-content-name {
    font-size: 20px;
    margin-bottom: 5px;
  }
}

@media only screen and (max-width: 991px) {
  .team-page__card-content-name {
    font-size: 16px;
  }
}

.team-page__card-content-dsc {
  color: #504242;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .team-page__card-content-dsc {
    font-size: 17px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .team-page__card-content-dsc {
    font-size: 16px;
    margin-bottom: 15px;
  }
}

.team-page__card-content-list {
  display: flex;
  gap: 20px;
}

@media only screen and (max-width: 1399px) {
  .team-page__card-content-list {
    gap: 10px;
  }
}

.team-page__card-content-list-items {
  padding: 10px 20px;
  display: inline-block;
  border-radius: 90px;
  border: 1px solid #fff;
  background: #fff;
  list-style: none;
  color: #000;
  font-family: Kanit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 133.333%;
}

@media only screen and (max-width: 1399px) {
  .team-page__card-content-list-items {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* === Team-achievement (team-page) === */
.team-section__card {
  position: relative;
  overflow: hidden;
}

.team-section__card-thumb {
  position: relative;
  transition: all 0.4s ease-in-out;
  margin-bottom: 27px;
  border-radius: 20px;
}

@media only screen and (max-width: 1399px) {
  .team-section__card-thumb {
    margin-bottom: 20px;
  }
}

.team-section__card-thumb img {
  border-radius: 20px;
  max-width: 100%;
}

.team-section__card-items {
  position: absolute;
  left: 50%;
  top: 40%;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.team-section__card-items-list {
  display: inline-flex;
  transform: rotate(-90deg);
  gap: 9px;
}

.team-section__card-items-list li {
  height: 30px;
  padding: 3px 20px;
  align-items: center;
  flex-shrink: 0;
  list-style: none;
  border-radius: 90px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  font-family: Kanit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 173.333%;
}

.team-section__card-items-list li:hover {
  background: var(--white);
  color: var(--primary);
}

.team-section__card-content-title {
  margin-bottom: 8px;
}

.team-section__card-content-title-name {
  color: #000;
  font-family: var(--font_instr);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
}

@media only screen and (max-width: 1919px) {
  .team-section__card-content-title-name {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-section__card-content-title-name {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-section__card-content-title-name {
    font-size: 18px;
  }
}

.team-section__card-content-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 1199px) {
  .team-section__card-content-subtitle {
    font-size: 16px;
  }
}

.team-section__card:hover .team-section__card-items {
  visibility: visible;
  opacity: 1;
}

/* === Team-achievement (team-page) === */
.team-achievement__card {
  padding: 40px 60px;
  border-radius: 10px;
  background: #fff;
}

@media only screen and (max-width: 1919px) {
  .team-achievement__card {
    padding: 30px 30px;
  }
}

.team-achievement__card-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .team-achievement__card-title {
    font-size: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-achievement__card-title {
    font-size: 76px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-achievement__card-title {
    font-size: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .team-achievement__card-title {
    font-size: 50px;
  }
}

.team-achievement__card-text {
  color: #000;
  text-align: right;
  font-family: var(--font_instr);
  font-size: 29px;
  font-style: normal;
  font-weight: 500;
  line-height: 133.333%;
}

@media only screen and (max-width: 1919px) {
  .team-achievement__card-text {
    font-size: 25px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-achievement__card-text {
    font-size: 18px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-achievement__card-text {
    font-size: 16px;
  }
}

@media only screen and (max-width: 991px) {
  .team-achievement__card-text {
    font-size: 15px;
  }
}

.team-vision {
  background: var(--primary);
  padding: 120px 0 520px;
}

@media only screen and (max-width: 1919px) {
  .team-vision {
    padding: 120px 0 320px;
  }
}

@media only screen and (max-width: 767px) {
  .team-vision {
    padding: 120px 0 200px;
  }
}

.team-vision__thumb {
  margin-top: -412px;
}

@media only screen and (max-width: 1919px) {
  .team-vision__thumb {
    margin-top: -200px;
  }
}

@media only screen and (max-width: 767px) {
  .team-vision__thumb {
    margin-top: -100px;
  }
}

.team-vision__thumb-img {
  border-radius: 16px;
}

.team-vision__thumb-img img {
  border-radius: 16px;
}

.team-vision__title {
  color: var(--white);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 50px;
  line-height: 60px;
  padding-right: 50px;
}

@media only screen and (max-width: 1919px) {
  .team-vision__title {
    margin-bottom: 30px;
    font-size: 40px;
  }
}

.team-vision__item {
  margin-bottom: 70px;
  padding-left: 60px;
}

@media only screen and (max-width: 1919px) {
  .team-vision__item {
    margin-bottom: 30px;
    padding-left: 30px;
  }
}

.team-vision__item:last-child {
  margin-bottom: 0;
}

.team-vision__item:first-child {
  border-left: 1px solid var(--white);
}

.team-vision__item-title {
  color: var(--white);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1919px) {
  .team-vision__item-title {
    margin-bottom: 10px;
  }
}

.team-vision__item-text {
  color: var(--gray);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 0%;
}

.team-details {
  padding: 250px 0px 120px;
}

@media only screen and (max-width: 1199px) {
  .team-details {
    padding: 150px 0px 120PX;
  }
}

.team-details__title {
  color: #000;
  text-align: center;
  font-family: Thunder;
  font-size: 420px;
  font-style: normal;
  font-weight: 700;
  line-height: 95.238%;
  text-transform: uppercase;
}

@media only screen and (max-width: 1919px) {
  .team-details__title {
    font-size: 320px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-details__title {
    font-size: 233px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-details__title {
    font-size: 163px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__title {
    font-size: 67px;
  }
}

.team-details__items-thumb {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.team-details__items-thumb img {
  border-radius: 20px;
  max-width: 100%;
}

.team-details__items-bottom {
  padding: 47px 45px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background: #FFF;
  margin-bottom: 110px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-bottom {
    padding: 30px 35px;
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-bottom {
    padding: 20px 25px;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 20px;
  }
}

.team-details__items-social-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-social-subtitle {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-social-subtitle {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.team-details__items-social-link {
  display: flex;
  align-items: center;
  gap: 15px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-social-link {
    gap: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-social-link {
    gap: 6px;
  }
}

.team-details__items-social-link span {
  width: 46.386px;
  height: 46.386px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  border-radius: 36px;
  background: transparent;
  color: #000;
  transition: all 0.4s ease-in-out;
  border: 1px solid #000;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-social-link span {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-social-link span {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

.team-details__items-social-link span:hover {
  border: none;
  background: #000;
  color: white;
}

.team-details__items-role-subtitle {
  color: #555;
  text-align: center;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-role-subtitle {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

.team-details__items-role-title {
  color: #000;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 133.333%;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-role-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-role-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

.team-details__items-exp-subtitle {
  color: #555;
  text-align: center;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-exp-subtitle {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

.team-details__items-exp-title {
  color: #000;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 133.333%;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-exp-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-exp-title {
    font-size: 16px;
  }
}

.team-details__items-content {
  text-align: center;
  justify-content: center;
  justify-items: center;
}

.team-details__items-content-subtitle {
  color: #000;
  text-align: center;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  width: 864px;
  margin-bottom: 35px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-content-subtitle {
    font-size: 20px;
    width: 650px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-content-subtitle {
    font-size: 17px;
    width: 300px;
    margin-bottom: 14px;
  }
}

.team-details__items-content-subtitle2 {
  color: #000;
  text-align: center;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  width: 864px;
  margin-bottom: 35px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-content-subtitle2 {
    font-size: 20px;
    width: 650px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-content-subtitle2 {
    font-size: 17px;
    width: 300px;
    margin-bottom: 14px;
  }
}

.team-details__items-content-subtitle3 {
  color: #000;
  text-align: center;
  font-family: Kanit;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  width: 864px;
}

@media only screen and (max-width: 1199px) {
  .team-details__items-content-subtitle3 {
    font-size: 20px;
    width: 650px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .team-details__items-content-subtitle3 {
    font-size: 17px;
    width: 300px;
    margin-bottom: 14px;
  }
}

/* === service-details (service-details) === */
.service-details {
  padding: 250px 0 120px;
  background: var(--gray-three);
}

@media only screen and (max-width: 1399px) {
  .service-details {
    padding: 200px 0 100px;
  }
}

.service-details__title {
  color: #000;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  margin-bottom: 35px;
}

@media only screen and (max-width: 1919px) {
  .service-details__title {
    font-size: 62px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__title {
    font-size: 48px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__title {
    font-size: 37px;
  }
}

@media only screen and (max-width: 991px) {
  .service-details__title {
    font-size: 30px;
  }
}

.service-details__items {
  margin-bottom: 140px;
}

@media only screen and (max-width: 1919px) {
  .service-details__items {
    margin-bottom: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__items {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__items {
    margin-bottom: 50px;
  }
}

.service-details__items-list {
  display: flex;
  gap: 15px;
  text-align: center;
  justify-content: center;
}

@media only screen and (max-width: 1199px) {
  .service-details__items-list {
    gap: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .service-details__items-list {
    flex-wrap: wrap;
    gap: 20px;
  }
}

.service-details__items-list-bt {
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  text-transform: uppercase;
  border-radius: 90px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFF;
  display: inline-flex;
  transform: rotate(-10deg);
  padding: 12px 25px;
  align-items: center;
  gap: 10px;
}

@media only screen and (max-width: 1399px) {
  .service-details__items-list-bt {
    font-size: 14px;
    line-height: 125%;
    padding: 10px 10px;
    gap: 6px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__items-list-bt {
    font-size: 10px;
    line-height: 119%;
    padding: 10px 14px;
    gap: 3px;
  }
}

.service-details__items-list-bt2 {
  color: #000;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  text-transform: uppercase;
  border-radius: 90px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFF;
  display: inline-flex;
  padding: 12px 25px;
  align-items: center;
  gap: 10px;
}

@media only screen and (max-width: 1399px) {
  .service-details__items-list-bt2 {
    font-size: 13px;
    line-height: 125%;
    padding: 10px 10px;
    gap: 6px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__items-list-bt2 {
    font-size: 10px;
    line-height: 119%;
    padding: 10px 14px;
    gap: 3px;
  }
}

.service-details__thumb {
  padding: 300px 0px;
  margin-bottom: 60px;
}

@media only screen and (max-width: 1399px) {
  .service-details__thumb {
    padding: 200px 0px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__thumb {
    padding: 170px 0px;
    margin-bottom: 30px;
  }
}

.service-details__subtitle {
  color: #000;
  text-align: left;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  width: 855px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .service-details__subtitle {
    font-size: 40px;
    width: 814px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__subtitle {
    font-size: 33px;
    width: 670px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__subtitle {
    font-size: 30px;
    width: 602px;
  }
}

@media only screen and (max-width: 991px) {
  .service-details__subtitle {
    font-size: 21px;
    width: 337px;
  }
}

.service-details__text {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  width: 1318px;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1399px) {
  .service-details__text {
    font-size: 17px;
    width: 993px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__text {
    font-size: 17px;
    width: 744px;
  }
}

@media only screen and (max-width: 767px) {
  .service-details__text {
    font-size: 15px;
    width: 309px;
  }
}

.service-details__card {
  padding: 45px 30px;
  border-radius: 10px;
  background: #FFF;
}

@media only screen and (max-width: 1399px) {
  .service-details__card {
    padding: 30px 25px;
  }
}

.service-details__card-number {
  color: #000;
  font-family: var(--font_instr);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 155.556%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .service-details__card-number {
    font-size: 16px;
  }
}

.service-details__card-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 138.462%;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
  .service-details__card-title {
    font-size: 23px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__card-title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__card-title {
    font-size: 18px;
  }
}

.service-details__card-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 162.5%;
}

@media only screen and (max-width: 1399px) {
  .service-details__card-subtitle {
    font-size: 15px;
  }
}

.service-details__content {
  margin-top: 50px;
}

@media only screen and (max-width: 1399px) {
  .service-details__content {
    margin-top: 30px;
  }
}

.service-details__content-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 21px;
}

@media only screen and (max-width: 1919px) {
  .service-details__content-title {
    font-size: 40px;
    margin-bottom: 19px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__content-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__content-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.service-details__content-subtitle {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 40px;
}

@media only screen and (max-width: 1399px) {
  .service-details__content-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__content-subtitle {
    font-size: 15px;
    margin-bottom: 20px;
  }
}

.service-details__content-title2 {
  color: #000;
  font-family: var(--font_instr);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1919px) {
  .service-details__content-title2 {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__content-title2 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__content-title2 {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.service-details__content-subtitle2 {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1399px) {
  .service-details__content-subtitle2 {
    font-size: 16px;
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__content-subtitle2 {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

.service-details__content-items {
  margin-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .service-details__content-items {
    margin-bottom: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-details__content-items {
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__content-items {
    margin-bottom: 50px;
  }
}

.service-details__content-items-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #101010;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

/* Red Dot for Deliverables List */
.service-details__content-items-list li::before {
  content: "•";
  color: #f14f44;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  margin-top: -3px;
}

@media only screen and (max-width: 991px) {
  .service-details__content-items-list li {
    gap: 10px;
  }
}

.service-details__content-items-list li:not(:last-child) {
  margin-bottom: 15px;
}

.service-details__content-items-list li .icon svg {
  width: 15px;
}

@media only screen and (max-width: 1399px) {
  .service-details__content-items-list li {
    font-size: 16px;
  }
}

.service-details__thumb2 {
  padding: 650px 0px 0px;
}

@media only screen and (max-width: 1399px) {
  .service-details__thumb2 {
    padding: 450px 0px 0px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-details__thumb2 {
    padding: 350px 0px 0px;
  }
}

.blog-section-5 .row {
  -moz-column-gap: 60px;
  column-gap: 60px;
}

.blog-section-5__wrapper {
  background: var(--black);
}

.blog-section-5__btn .rr-btn-green {
  padding: 23px 58px;
  border-radius: 90px;
}

@media only screen and (max-width: 575px) {
  .blog-section-5__btn .rr-btn-green {
    padding: 16px 30px;
  }
}

.blog-section-5__wrap {
  gap: 60px;
  display: grid;
  grid-template-columns: auto auto auto;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__wrap {
    gap: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-section-5__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .blog-section-5__wrap {
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575px) {
  .blog-section-5__wrap {
    grid-template-columns: 1fr;
  }
}

.blog-section-5__item {
  border-radius: 10px;
  background: var(--white);
  padding: 43px 30px 35px 30px;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__item {
    padding: 43px 15px 35px 15px;
  }
}

.blog-section-5__item:hover .blog-section-5__icon a {
  color: var(--black);
  background: var(--yellow);
}

.blog-section-5__thumb {
  position: relative;
  border-radius: 10px;
}

.blog-section-5__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  clip-path: polygon(68% 0, 68% 15%, 100% 15%, 100% 100%, 0 100%, 0 0);
}

.blog-section-5__meta {
  gap: 73px;
  display: flex;
  padding-left: 12px;
  align-items: center;
}

.blog-section-5__catagory {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  position: relative;
  color: var(--black);
  font-family: var(--font_kanit);
}

.blog-section-5__catagory::before {
  content: "";
  top: 12px;
  width: 6px;
  left: -13px;
  height: 6px;
  display: block;
  position: absolute;
  border-radius: 100%;
  background: var(--black);
}

.blog-section-5__time {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  position: relative;
  font-family: var(--font_kanit);
}

.blog-section-5__time::before {
  content: "";
  top: 14px;
  left: -50px;
  width: 30px;
  height: 1px;
  display: block;
  position: absolute;
  border-radius: 100%;
  background: var(--black);
}

.blog-section-5__title {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: var(--black);
  padding: 37px 0 33px 0;
  font-family: var(--font_instr);
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__title br {
    display: none;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__title {
    font-size: 20px;
    line-height: 33px;
    padding: 24px 0 24px 0;
  }
}

@media only screen and (max-width: 575px) {
  .blog-section-5__title {
    font-size: 17px;
    line-height: 26px;
  }
}

.blog-section-5__title:hover {
  color: var(--secondary);
}

.blog-section-5__icon {
  margin-top: 35px;
}

.blog-section-5__icon a {
  width: 56px;
  height: 56px;
  display: flex;
  color: var(--white);
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  background: var(--black);
  transform: rotate(-45deg);
}

@media only screen and (max-width: 1199px) {
  .blog-section-5__icon a {
    width: 46px;
    height: 46px;
  }
}

.blog-section-5__date {
  top: 6px;
  right: 33px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  position: absolute;
  font-family: var(--font_kanit);
}

@media only screen and (max-width: 1399px) {
  .blog-section-5__date {
    top: 0;
    right: 8px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-section-5__date {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-section-5__date {
    grid-template-columns: repeat(2, 1fr);
    right: 0;
  }
}

.blog-details__top {
  position: relative;
  z-index: 9;
  height: 1000px;
}

.blog-details__top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog-details__up {
  position: relative;
  z-index: 9;
  margin-bottom: 60px;
  margin-top: -300px;
  background: var(--gray-three);
  padding-top: 120px;
}

.blog-details__up-wrap {
  text-align: center;
}

.blog-details__subtitle {
  display: inline-flex;
  padding: 10px 25px;
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  background: var(--green);
  color: var(--black);
  border-radius: 8px;
  margin-bottom: 30px;
}

.blog-details__date {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: var(--black);
}

.blog-details__title {
  font-family: var(--font_instr);
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  margin-bottom: 30px;
}

.blog-details__author {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.blog-details__author-item {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}

.blog-details__author-thumb {
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.blog-details__author-content {
  text-align: start;
}

.blog-details__author-content .title {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: var(--gray-two);
  margin-bottom: 5px;
}

.blog-details__author-content .name {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--black);
}

.blog-details__author-content .view {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: var(--gray-two);
  margin-bottom: 5px;
}

.blog-details__author-content .time {
  font-family: var(--font_kanit);
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: var(--black);
}

.blog-details-wrapper-items-content__text {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-content__text {
    font-size: 16px;
  }
}

.blog-details-wrapper-items-content__subtext {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 25px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-content__subtext {
    font-size: 16px;
    margin-top: 20px;
  }
}

.blog-details-wrapper-items-content__title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-top: 20px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-content__title {
    font-size: 30px;
    margin-top: 15px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-content__title {
    font-size: 25px;
    margin-top: 15px;
  }
}

.blog-details-wrapper-items-content__subtext1 {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 20px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-content__subtext1 {
    font-size: 16px;
    margin-top: 15px;
  }
}

.blog-details-wrapper-items__client {
  display: flex;
  gap: 30px;
  background-color: #ffffff;
  padding: 20px 25px;
  border-radius: 6px;
  margin-top: 31px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items__client {
    gap: 20px;
    padding: 15px 20px;
  }
}

@media only screen and (max-width: 575px) {
  .blog-details-wrapper-items__client {
    flex-wrap: wrap;
    gap: 10px;
  }
}

.blog-details-wrapper-items__client-icon svg {
  width: 40px;
}

.blog-details-wrapper-items__client-content-subtitle {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  margin-top: 10px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items__client-content-subtitle {
    font-size: 16px;
  }
}

.blog-details-wrapper-items__client-content-name {
  position: relative;
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0%;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  margin-top: 20px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items__client-content-name {
    font-size: 16px;
    margin-top: 16px;
  }
}

.blog-details-wrapper-items-tag {
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag {
    margin-bottom: 20px;
  }
}

.blog-details-wrapper-items-tag__subtitle {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 30px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag__subtitle {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag__subtitle {
    margin-top: 15px;
    font-size: 16px;
  }
}

.blog-details-wrapper-items-tag__thumb {
  display: flex;
  justify-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 30px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag__thumb {
    margin-top: 25px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag__thumb {
    margin-top: 20px;
  }
}

.blog-details-wrapper-items-tag__thumb img {
  max-width: 100%;
}

.blog-details-wrapper-items-tag-content__title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-top: 25px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag-content__title {
    margin-top: 20px;
    font-size: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag-content__title {
    margin-top: 15px;
    font-size: 20px;
  }
}

.blog-details-wrapper-items-tag-content__subtitle {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 25px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag-content__subtitle {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag-content__subtitle {
    margin-top: 15px;
    font-size: 16px;
  }
}

.blog-details-wrapper-items-tag-content__title2 {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-top: 25px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag-content__title2 {
    font-size: 30px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag-content__title2 {
    font-size: 20px;
    margin-top: 16px;
  }
}

.blog-details-wrapper-items-tag-content__subtitle2 {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 25px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag-content__subtitle2 {
    font-size: 17px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag-content__subtitle2 {
    font-size: 16px;
    margin-top: 15px;
  }
}

.blog-details-wrapper-items-tag__border {
  padding: 20px 0px;
  border-top: 1px solid rgba(28, 36, 54, 0.3);
  border-bottom: 1px solid rgba(28, 36, 54, 0.3);
  margin-top: 50px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-tag__border {
    padding: 16px 0px;
    margin-top: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-tag__border {
    margin-top: 30px;
  }
}

.blog-details-wrapper-items-tag__tagcloud {
  gap: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.blog-details-wrapper-items-tag__tagcloud-title {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.blog-details-wrapper-items-tag__tagcloud-button {
  display: inline-flex;
  height: 30px;
  padding: 14px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1px solid rgba(28, 36, 54, 0.3);
  color: #000000;
  font-family: Instrument Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

@media only screen and (max-width: 575px) {
  .blog-details-wrapper-items-tag__tagcloud-button {
    font-size: 14px;
  }
}

.blog-details-wrapper-items-tag__title {
  color: #000000;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

.blog-details-wrapper-items-tag__social {
  gap: 11px;
  position: relative;
  z-index: 9;
}

.blog-details-wrapper-items-tag__social a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  display: block;
  transition: all 0.4s ease-in-out;
  text-align: center;
  border-radius: 999px;
}

.blog-details-wrapper-items-tag__social a i {
  font-size: 16px;
}

.blog-details-wrapper-items-tag-button {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: 850px;
  height: 90px;
  border-radius: 20px;
  margin-top: 33px;
}

.blog-details-wrapper-items-tag-button__arry-prev {
  margin-left: 35px;
}

.blog-details-wrapper-items-tag-button__arry-prev-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  text-align: center;
  border-radius: 999px;
}

.blog-details-wrapper-items-tag-button__arry-prev-icon i {
  font-size: 20px;
}

.blog-details-wrapper-items-tag-button__arry-prev-text {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.64px;
  margin-left: 17px;
}

.blog-details-wrapper-items-tag-button__arry-next {
  margin-right: 35px;
}

.blog-details-wrapper-items-tag-button__arry-next-text {
  text-align: right;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.64px;
  margin-right: 17px;
}

.blog-details-wrapper-items-tag-button__arry-next-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  text-align: center;
  border-radius: 999px;
  transition: all 0.4s ease-in-out;
}

.blog-details-wrapper-items-tag-button__arry-next-icon i {
  font-size: 20px;
}

.blog-details-wrapper-items-mentor {
  padding: 20px 20px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 25px;
}

@media only screen and (max-width: 575px) {
  .blog-details-wrapper-items-mentor {
    flex-wrap: wrap;
    gap: 15px;
  }
}

.blog-details-wrapper-items-mentor__thumb img {
  width: 140px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-mentor__thumb img {
    margin-top: 120px;
  }
}

.blog-details-wrapper-items-mentor__content-title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0%;
  text-decoration-thickness: 0%;
  margin-bottom: 12px;
}

.blog-details-wrapper-items-mentor__content-subtitle {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
}

.blog-details-wrapper-items-comments {
  margin-top: 66px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-comments {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments {
    margin-top: 40px;
  }
}

.blog-details-wrapper-items-comments__heading {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-comments__heading {
    font-size: 30px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments__heading {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.blog-details-wrapper-items-comments-single {
  display: flex;
  gap: 20px;
  align-items: center;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-comments-single {
    gap: 16px;
  }
}

@media only screen and (max-width: 575px) {
  .blog-details-wrapper-items-comments-single {
    flex-wrap: wrap;
  }
}

.blog-details-wrapper-items-comments-single:not(:last-child) {
  margin-bottom: 52px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-comments-single:not(:last-child) {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments-single:not(:last-child) {
    margin-bottom: 30px;
  }
}

.blog-details-wrapper-items-comments-single__thumb img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog-details-wrapper-items-comments-single-content-head__con-date {
  color: #555555;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments-single-content-head__con-date {
    font-size: 16px;
  }
}

.blog-details-wrapper-items-comments-single-content-head__con-title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0%;
  text-decoration-thickness: 0%;
  margin-top: 6px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments-single-content-head__con-title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-details-wrapper-items-comments-single-content-head__con-title {
    font-size: 17px;
  }
}

.blog-details-wrapper-items-comments-single-content-head__icon {
  color: #000000;
  padding: 7px 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  background-color: #ffffff;
  width: 97px;
  text-align: center;
  font-family: Kanit;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  margin-top: 10px;
  transition: all 0.4s ease-in-out;
}

.blog-details-wrapper-items-comments-single-content-head__icon:hover {
  background-color: #41f681;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments-single-content-head__icon {
    font-size: 16px;
  }
}

.blog-details-wrapper-items-comments-single-content__text {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  margin-top: 13px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-comments-single-content__text {
    font-size: 16px;
  }
}

.blog-details-wrapper-items-form {
  margin-top: 67px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-form {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-form {
    margin-top: 40px;
  }
}

.blog-details-wrapper-items-form__title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  margin-bottom: 22px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-wrapper-items-form__title {
    font-size: 30px;
    margin-bottom: 18px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-form__title {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.blog-details-wrapper-items-form__contact-clt input,
.blog-details-wrapper-items-form__contact-clt textarea {
  width: 100%;
  outline: none;
  padding: 16px 26px;
  font-weight: 400;
  color: #555555;
  font-family: Kanit;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  border-radius: 8px;
  background: #ffffff;
  border: none;
}

.blog-details-wrapper-items-form__contact-clt input::-moz-placeholder,
.blog-details-wrapper-items-form__contact-clt textarea::-moz-placeholder {
  color: #555555;
  font-family: Kanit;
  font-size: 16px;
}

.blog-details-wrapper-items-form__contact-clt input::placeholder,
.blog-details-wrapper-items-form__contact-clt textarea::placeholder {
  color: #555555;
  font-family: Kanit;
  font-size: 16px;
}

.blog-details-wrapper-items-form__contact-clt textarea {
  padding-bottom: 110px;
  resize: none;
}

@media only screen and (max-width: 1399px) {
  .blog-details-wrapper-items-form__contact-clt textarea {
    padding-bottom: 90px;
  }
}

.main-sidebar2-widget {
  padding: 34px 34px 34px;
  border-radius: 10px;
  background: #FFFFFF;
}

.main-sidebar2-widget:not(:last-child) {
  margin-bottom: 41px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget {
    padding: 26px 24px 26px;
  }
}

.main-sidebar2-widget__heading {
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__heading {
    margin-bottom: 17px;
  }
}

.main-sidebar2-widget__heading-title {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__heading-title {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-sidebar2-widget__heading-title {
    font-size: 18px;
  }
}

.main-sidebar2-widget__search-widget {
  margin-top: 20px;
}

.main-sidebar2-widget__search-widget form {
  display: flex;
  gap: 10px;
  width: 100%;
  position: relative;
}

.main-sidebar2-widget__search-widget form input {
  background-color: #EFF1F3;
  padding: 16px 20px;
  width: 80%;
  border: none;
  color: #555555;
  font-family: Kanit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 26px;
  letter-spacing: 0%;
  text-transform: capitalize;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form input {
    padding: 14px 20px;
    width: 80%;
    font-size: 15px;
  }
}

.main-sidebar2-widget__search-widget form input::-moz-placeholder {
  color: #555555;
}

.main-sidebar2-widget__search-widget form input::placeholder {
  color: #555555;
}

.main-sidebar2-widget__search-widget form button {
  position: absolute;
  padding: 16px 20px;
  background: #000000;
  width: 60px;
  height: 60px;
  right: 6%;
  top: -1%;
  opacity: 1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form button {
    padding: 14px 20px;
    width: 60px;
    height: 55px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-sidebar2-widget__search-widget form button {
    right: 12%;
  }
}

.main-sidebar2-widget__search-widget form button svg {
  width: 19px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__search-widget form button svg {
    width: 16px;
  }
}

.main-sidebar2-widget__categories ul li {
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding: 20px 0;
}

.main-sidebar2-widget__categories ul li a {
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__categories ul li a {
    font-size: 16px;
  }
}

.main-sidebar2-widget__categories ul li a .text {
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__categories ul li a .text {
    font-size: 16px;
  }
}

.main-sidebar2-widget__categories ul li a .text i {
  margin-right: 10px;
}

.main-sidebar2-widget__categories ul li:hover a .text {
  margin-left: 20px;
}

.main-sidebar2-widget__post-items {
  display: flex;
  gap: 40px;
}

@media only screen and (max-width: 1919px) {
  .main-sidebar2-widget__post-items {
    gap: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items {
    gap: 20px;
  }
}

.main-sidebar2-widget__post-items:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding-bottom: 27px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items:not(:last-child) {
    padding-bottom: 15px;
  }
}

.main-sidebar2-widget__post-items-thumb {
  margin-top: 22px;
}

.main-sidebar2-widget__post-items-thumb img {
  max-width: 100%;
}

.main-sidebar2-widget__post-items-content-post {
  margin-top: 16px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post {
    margin-top: 14px;
  }
}

.main-sidebar2-widget__post-items-content-post-date {
  position: relative;
  color: #000000;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  list-style: none;
  text-transform: uppercase;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post-date {
    font-size: 15px;
  }
}

.main-sidebar2-widget__post-items-content-post-date::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  top: 10px;
  left: -20px;
  opacity: 1;
  border-radius: 36px;
  background: #000000;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-post-date::before {
    display: none;
  }
}

.main-sidebar2-widget__post-items-content-title {
  margin-top: 10px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-title {
    margin-top: 8px;
  }
}

.main-sidebar2-widget__post-items-content-title a {
  color: #000000;
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__post-items-content-title a {
    font-size: 16px;
  }
}

.main-sidebar2-widget__tags-tagcloud {
  margin-top: 22px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__tags-tagcloud {
    margin-top: 17px;
  }
}

.main-sidebar2-widget__tags-tagcloud a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #393939;
  height: 40px;
  font-family: Kanit;
  padding: 18px 13px;
  font-size: 18px;
  font-weight: 400;
  border-radius: 36px;
  margin-top: 10px;
  border: 1px solid rgba(85, 85, 85, 0.3333333333);
  transition: all 0.3s ease-in-out;
  margin-right: 8px;
}

@media only screen and (max-width: 1399px) {
  .main-sidebar2-widget__tags-tagcloud a {
    height: 30px;
    padding: 15px 13px;
    font-size: 16px;
  }
}

.main-sidebar2-widget__tags-tagcloud a:hover {
  background-color: #41F681;
  color: #000000;
  transition: all 0.3s ease-in-out;
  border: none;
}

.main-sidebar2-widget__tags-tagcloud a.active {
  background-color: #41F681;
  color: #000000;
  transition: all 0.3s ease-in-out;
  border: none;
}

.error {
  background-color: #000;
  padding-top: 250px;
}

.error__thumb {
  text-align: center;
  margin-bottom: 100px;
}

@media only screen and (max-width: 1919px) {
  .error__thumb {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .error__thumb {
    margin-bottom: 50px;
  }
}

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

.error__title {
  padding: 19px 0px 10px;
  background: var(--red);
  color: #fff;
  text-align: center;
  font-family: Thunder;
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: 113.889%;
  text-transform: uppercase;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1919px) {
  .error__title {
    padding: 15px 0px 10px;
    font-size: 62px;
  }
}

@media only screen and (max-width: 1399px) {
  .error__title {
    padding: 13px 0px 8px;
    margin-bottom: 40px;
    font-size: 52px;
  }
}

@media only screen and (max-width: 1199px) {
  .error__title {
    padding: 13px 0px 8px;
    margin-bottom: 30px;
    font-size: 42px;
  }
}

@media only screen and (max-width: 767px) {
  .error__title {
    padding: 13px 0px 8px;
    margin-bottom: 26px;
    font-size: 25px;
  }
}

.error-content__text {
  color: #FFF;
  text-align: center;
  font-family: var(--font_instr);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 141.667%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1919px) {
  .error-content__text {
    font-size: 22px;
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 1199px) {
  .error-content__text {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .error-content__text {
    font-size: 16px;
    margin-bottom: 18px;
  }
}

.error-content__button {
  display: flex;
  justify-content: center;
}

.project {
  background-color: #F0F2F4;
}

.project__card {
  position: relative;
  padding: 30px 40px;
  background-color: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 1919px) {
  .project__card {
    padding: 25px 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .project__card {
    padding: 25px 25px;
  }
}

@media only screen and (max-width: 1199px) {
  .project__card {
    padding: 25px 23px;
  }
}

.project__card-title {
  font-family: Instrument Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0%;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0%;
  text-decoration-thickness: 0%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

@media only screen and (max-width: 1919px) {
  .project__card-title {
    font-size: 26px;
  }
}

@media only screen and (max-width: 1399px) {
  .project__card-title {
    font-size: 23px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .project__card-title {
    font-size: 22px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .project__card-title {
    font-size: 20px;
  }
}

.project__card-subtitle {
  color: #000000;
  font-family: Kanit;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  visibility: hidden;
  opacity: 0;
}

@media only screen and (max-width: 1399px) {
  .project__card-subtitle {
    font-size: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .project__card-subtitle {
    font-size: 16px;
  }
}

.project__card-button {
  position: relative;
  font-size: 24px;
  color: #000;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  display: flex;
  padding: 13px 17px 12px 16px;
  border-radius: 4px 4px 0 0;
  background: transparent;
  justify-content: end;
}

@media only screen and (max-width: 1919px) {
  .project__card-button {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .project__card-button {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .project__card-button {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .project__card-button {
    font-size: 17px;
  }
}

.project__card-button::after {
  content: "-";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  padding: 14px 14px;
  border-radius: 30px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.project__card-button:not(.collapsed)::after {
  content: "+";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  padding: 14px 14px;
  border-radius: 30px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.project__card:hover .project__card {
  background-color: #41F681 !important;
  transition: all 0.4s ease-in-out;
}

.project__card:hover .project__card-title {
  visibility: hidden;
  opacity: 0;
}

.project__card:hover .project__card-subtitle {
  visibility: visible;
  opacity: 1;
}

.project__card:hover .project__card-button {
  position: relative;
  font-size: 24px;
  color: #000;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  display: flex;
  padding: 13px 17px 12px 16px;
  border-radius: 4px 4px 0 0;
  background: transparent;
  justify-content: end;
}

@media only screen and (max-width: 1919px) {
  .project__card:hover .project__card-button {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .project__card:hover .project__card-button {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .project__card:hover .project__card-button {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .project__card:hover .project__card-button {
    font-size: 17px;
  }
}

.project__card:hover .project__card-button:not(.collapsed)::after {
  content: "-";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  padding: 14px 14px;
  border-radius: 30px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.faq1 {
  background-color: #FFFFFF;
}

.faq1__top-section-title {
  color: #000;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
  .faq1__top-section-title {
    font-size: 40px;
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 1199px) {
  .faq1__top-section-title {
    font-size: 30px;
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 575px) {
  .faq1__top-section-title {
    font-size: 23px;
  }
}

.accordion .global-accordion-item {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 4px 10px 15px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
  overflow: hidden;
}

.accordion .global-accordion-item .global-accordion-header {
  margin: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion .global-accordion-item .global-accordion-button {
  position: relative;
  font-family: "Instrument Sans";
  font-size: 24px;
  color: #000;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 17px 12px 16px;
  border-radius: 4px 4px 0 0;
  background: #FFF;
}

@media only screen and (max-width: 1919px) {
  .accordion .global-accordion-item .global-accordion-button {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .accordion .global-accordion-item .global-accordion-button {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .accordion .global-accordion-item .global-accordion-button {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .accordion .global-accordion-item .global-accordion-button {
    font-size: 17px;
  }
}

.accordion .global-accordion-item .global-accordion-button::after {
  content: "+";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  padding: 14px 14px;
  border-radius: 30px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.accordion .global-accordion-item .global-accordion-button:not(.collapsed)::after {
  content: "-";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  padding: 14px 14px;
  border-radius: 30px;
  border: 1px solid #000;
  background: rgba(217, 217, 217, 0);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  transition: all 0.3s;
}

.accordion .global-accordion-item .global-accordion-button.collapsed {
  padding: 20px 30px 20px 30px;
  color: #000;
  font-family: "Instrument Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 141.667%;
  overflow: hidden;
}

@media only screen and (max-width: 1919px) {
  .accordion .global-accordion-item .global-accordion-button.collapsed {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .accordion .global-accordion-item .global-accordion-button.collapsed {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .accordion .global-accordion-item .global-accordion-button.collapsed {
    font-size: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .accordion .global-accordion-item .global-accordion-button.collapsed {
    font-size: 17px;
  }
}

.accordion .global-accordion-item .global-accordion-body {
  padding: 20px 30px 18px 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  padding-top: 15px;
  padding-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
}

.accordion .global-accordion-item .global-accordion-body p {
  color: #555;
  font-family: Kanit;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
}

@media only screen and (max-width: 1399px) {
  .accordion .global-accordion-item .global-accordion-body p {
    font-size: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .accordion .global-accordion-item .global-accordion-body p {
    font-size: 16px;
  }
}

.accordion .global-accordion-item .global-accordion-collapse.show {
  border-radius: 4px;
}

.check-out {
  background: #f4f6f8;
}

.check-out__box {
  background: transparent;
}

.check-out__box--summary {
  margin-top: 16px;
}

.check-out__heading {
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 25px;
}

.check-out__heading--right {
  text-align: left;
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 25px;
}

.check-out .check-out__box--form {
  padding: 0 8px;
  max-width: 720px;
  margin: 0 auto;
}

.check-out .check-out__box--form .check-out__toggle {
  margin-bottom: 12px;
}

.check-out .check-out__box--form .check-out__toggle-title {
  cursor: pointer;
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 16px 20px;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
}

.check-out .check-out__box--form .check-out__toggle-title .check-out__link {
  color: var(--orange);
  text-decoration: none;
  margin-left: 6px;
}

.check-out .check-out__box--form .check-out__form {
  background: transparent;
}

.check-out .check-out__box--form .check-out__form .check-out__label {
  display: block;
  color: var(--secondary);
  font-family: var(--font_kanit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 10px;
}

.check-out .check-out__box--form .check-out__form .check-out__input,
.check-out .check-out__box--form .check-out__form .check-out__select,
.check-out .check-out__box--form .check-out__form .check-out__textarea {
  width: 100%;
  padding: 16px 20px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--border-color-one);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 14px;
  color: var(--primary);
  outline: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.check-out .check-out__box--form .check-out__form .check-out__input:focus,
.check-out .check-out__box--form .check-out__form .check-out__select:focus,
.check-out .check-out__box--form .check-out__form .check-out__textarea:focus {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

.check-out .check-out__box--form .check-out__form .check-out__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--secondary) 50%), linear-gradient(135deg, var(--secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  line-height: 1.4;
}

.check-out .check-out__box--form .check-out__form .check-out__textarea {
  resize: vertical;
}

.check-out .check-out__box--form .check-out__form .check-out__checks {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.check-out .check-out__box--form .check-out__form .check-out__checks .check-out__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--secondary);
}

.check-out .check-out__box--form .check-out__form .check-out__checks .check-out__checkbox input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  /* Chrome/Edge support */
}

.check-out .check-out__box--form .check-out__form .check-out__checks .check-out__checkbox span {
  display: inline-block;
}

.check-out .check-out__box--summary {
  background: var(--white);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  border: 1px solid rgba(16, 24, 40, 0.03);
  max-width: 480px;
}

.check-out .check-out__box--summary .order-summary__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.check-out .check-out__box--summary .order-summary__media {
  width: 77px;
  height: 77px;
  border-radius: 10px;
  background: #f0f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-out .check-out__box--summary .order-summary__thumb {
  width: 56px;
  height: 56px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color-one);
}

.check-out .check-out__box--summary .order-summary__title {
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.check-out .check-out__box--summary .order-summary__qty {
  font-size: 13px;
  color: var(--secondary);
  margin-top: 4px;
}

.check-out .check-out__box--summary .order-summary__price {
  margin-left: auto;
  color: var(--orange);
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.check-out .check-out__box--summary .order-summary__divider {
  border: none;
  border-top: 1px solid var(--border-color-one);
  margin: 12px 0;
}

.check-out .check-out__box--summary .order-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--black);
  padding: 30px 0;
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  border-top: 1px solid var(--border-color-two);
}

.check-out .check-out__box--summary .order-summary__value {
  color: var(--orange);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.check-out .check-out__box--summary .order-summary__value.flat-rate {
  color: #555;
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.check-out .check-out__box--summary .order-summary__total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--black);
  padding: 30px 0;
  font-family: var(--font_kanit);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  border-top: 1px solid var(--border-color-two);
  font-weight: 700;
}

.check-out .check-out__box--summary .order-summary__total .order-summary__total-label {
  color: var(--secondary);
  font-weight: 600;
}

.check-out .check-out__box--summary .order-summary__total .order-summary__total-value {
  color: var(--orange);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.check-out .check-out__box--summary .order-summary__payment {
  padding: 30px;
  margin-top: 12px;
  border-radius: 10px;
  background: #f0f2f4;
}

.check-out .check-out__box--summary .order-summary__payment .order-summary__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 40, 0.03);
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
}

.check-out .check-out__box--summary .order-summary__payment .order-summary__radio input[type=radio] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
}

.check-out .check-out__box--summary .order-summary__payment .order-summary__radio span {
  color: var(--primary);
}

.check-out .check-out__box--summary .order-summary__payment .order-summary__payment-note {
  font-size: 13px;
  color: var(--secondary);
  margin: 8px 6px 12px;
}

.check-out .check-out__box--summary .order-summary__payment .order-summary__paypal-help {
  font-size: 11px;
  color: var(--secondary);
  margin-left: 8px;
}

.check-out .check-out__box--summary .check-out__placeorder {
  width: 100%;
  display: inline-block;
  margin-top: 30px;
  padding: 12px 16px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.check-out .check-out__box--summary .check-out__placeorder:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 106, 0, 0.12);
}

@media only screen and (max-width: 1199px) {
  .check-out .check-out__box--summary {
    margin-top: 24px;
  }
}

@media only screen and (max-width: 991px) {
  .check-out .check-out__box--summary {
    padding: 14px;
  }

  .check-out .check-out__heading {
    font-size: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .check-out .check-out__box--form {
    padding: 0 6px;
  }

  .check-out .check-out__box--summary {
    margin-top: 18px;
    padding: 12px;
  }

  .check-out .check-out__label {
    font-size: 13px;
  }

  .check-out .check-out__input,
  .check-out .check-out__select {
    padding: 9px 10px;
  }

  .check-out .order-summary__thumb {
    width: 48px;
    height: 48px;
  }
}

@media only screen and (max-width: 575px) {
  .check-out .check-out__box--summary {
    padding: 10px;
  }

  .check-out .check-out__placeorder {
    padding: 10px 12px;
    font-size: 15px;
  }
}

.cart-page .container {
  max-width: 1350px;
  margin: 0 auto;
}

.cart-page__panel {
  max-width: 1320px;
  margin-left: auto;
}

.cart-page__table-wrap {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  border: 1px solid rgba(16, 24, 40, 0.04);
}

.cart-page__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.cart-page td {
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  min-width: 230px;
}

.cart-page__th {
  text-align: start;
  padding: 10px;
  font-weight: 700;
  color: var(--black);
  font-family: var(--font_instr);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.04);
  vertical-align: middle;
}

.cart-page__item {
  border-bottom: 1px solid rgba(16, 24, 40, 0.04);
  width: 100%;
  margin: 10px;
  padding: 10px;
}

.cart-page__item:last-child {
  border-bottom: 0px;
  margin: 0;
}

.cart-page__product {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  vertical-align: middle;
  width: 350px;
}

.cart-page__product-media {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  border-radius: 10px;
  background: #f0f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-page__thumb {
  width: 56px;
  height: 56px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 40, 0.04);
  background: #fff;
  display: block;
}

.cart-page__product-meta {
  flex: 1;
}

.cart-page__product-title {
  color: var(--black);
  font-family: var(--font_kanit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--primary);
  margin-bottom: 6px;
}

.cart-page__product-variant {
  font-size: 12px;
  color: var(--secondary);
  letter-spacing: 0.4px;
}

.cart-page__price {
  padding: 18px 20px;
  font-weight: 700;
  color: var(--primary);
  width: 120px;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle;
}

.cart-page__qty-cell {
  padding: 18px 20px;
  width: 260px;
  gap: 12px;
  vertical-align: middle;
}

.cart-page__qty {
  background: #f5f6f7;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid rgba(16, 24, 40, 0.04);
  vertical-align: middle;
}

.cart-page__qty-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cart-page__qty-btn:active {
  transform: translateY(1px);
}

.cart-page__qty-input {
  width: 64px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 14px;
  outline: none;
}

.cart-page__remove {
  background: transparent;
  border: none;
  color: var(--secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
}

.cart-page__total {
  padding: 18px 20px;
  font-weight: 700;
  color: var(--primary);
  width: 120px;
  text-align: start;
  vertical-align: middle;
}

.cart-page__actions {
  margin-top: 20px;
  align-items: center;
}

.cart-page__coupon {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 460px;
}

.cart-page__coupon-input {
  flex: 1;
  padding: 17px 14px;
  border-radius: 15px;
  border: 1px solid #eee;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.04);
  font-size: 14px;
  outline: none;
  width: 100%;
}

.cart-page__coupon-msg {
  margin-top: 8px;
  font-size: 13px;
  color: var(--secondary);
}

.cart-page__summary-wrap {
  margin-top: 120px;
  border-radius: 15px;
  background: rgb(240, 242, 244);
  max-width: 561px;
  margin-left: auto;
}

.cart-page__summary {
  background: #ffffff;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(16, 24, 40, 0.04);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.18);
  margin-bottom: 30px;
}

.cart-page__summary-title {
  color: #000;
  font-family: var(--font_instr);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  color: var(--primary);
  margin-bottom: 20px;
}

.cart-page__summary-body {
  background: transparent;
  padding: 6px 0 12px;
}

.cart-page__row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--secondary);
  border-bottom: 1px solid var(--border-color-two);
  margin-bottom: 20px;
  padding-bottom: 23px;
}

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

.cart-page__row--shipping {
  align-items: flex-start;
  gap: 8px;
}

.cart-page__row--total {
  font-weight: 800;
  color: var(--primary);
  padding-top: 12px;
}

.cart-page__label {
  color: var(--secondary);
  color: #000;
  font-family: var(--font_kanit);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}

.cart-page__value {
  color: var(--primary);
}

.cart-page__value--strong {
  font-weight: 800;
}

.cart-page__shipping-meta {
  font-size: 13px;
  color: var(--secondary);
}

.cart-page__change-address {
  color: var(--primary);
  text-decoration: underline;
  font-size: 13px;
}

@media only screen and (max-width: 1199px) {
  .cart-page {
    padding: 40px 0;
  }

  .cart-page__table {
    min-width: 0;
  }
}

@media only screen and (max-width: 991px) {
  .cart-page {
    padding: 32px 0;
  }

  .cart-page__th {
    font-size: 12px;
    padding: 14px 16px;
  }

  .cart-page__product {
    padding: 14px 16px;
  }

  .cart-page__price,
  .cart-page__total,
  .cart-page__qty-cell {
    padding: 14px 16px;
    width: auto;
  }

  .cart-page__coupon {
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .cart-page {
    padding: 24px 0;
  }

  .cart-page__table-wrap {
    border-radius: 10px;
  }

  .cart-page .cart-page__table,
  .cart-page .cart-page__head {
    width: 100%;
    min-width: 0;
  }

  .cart-page .cart-page__product {
    padding: 10px;
    margin-bottom: 5px;
  }

  .cart-page .cart-page__price,
  .cart-page .cart-page__qty-cell,
  .cart-page .cart-page__total {
    padding: 0;
    font-size: 13px;
    margin-top: 6px;
  }

  .cart-page .cart-page__coupon {
    flex-direction: column;
    gap: 8px;
  }

  .cart-page .cart-page__coupon-btn,
  .cart-page .cart-page__update-btn {
    width: 100%;
  }
}

@media only screen and (max-width: 575px) {
  .cart-page {
    padding: 18px 0;
  }

  .cart-page__thumb {
    width: 48px;
    height: 48px;
  }

  .cart-page__qty-input {
    width: 58px;
  }

  .cart-page__coupon-input {
    padding: 10px 12px;
    width: 100%;
  }

  .cart-page__checkout-btn {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Base styles for shop-area */
.shop-area {
  background: #f4f6f8;
  /* MAIN content */
  /* .shop-main */
  /* responsive tweaks */
}

.shop-area .shop-sidebar {
  background: transparent;
}

.shop-area .shop-sidebar__widget {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  margin-bottom: 18px;
  border: 1px solid var(--border-color-two);
}

.shop-area .shop-sidebar__widget .shop-sidebar__title {
  font-size: 12px;
  color: var(--secondary);
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.shop-area .shop-sidebar__categories .shop-sidebar__item {
  font-size: 14px;
  color: var(--primary);
  padding: 8px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--border-color-two);
}

.shop-area .shop-sidebar__categories .shop-sidebar__item a {
  text-decoration: none;
  font-family: var(--font_kanit);
  background: var(--white);
  color: var(--gray-two);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.shop-area .shop-sidebar__categories .shop-sidebar__item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__categories .shop-sidebar__item .shop-sidebar__count {
  color: var(--gray);
  font-size: 13px;
}

.shop-area .shop-sidebar__price .shop-sidebar__range-values {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--secondary);
  margin-bottom: 8px;
}

.shop-area .shop-sidebar__price .shop-sidebar__range {
  width: 100%;
  accent-color: var(--orange);
  margin: 6px 0 12px;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap .shop-sidebar__price-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color-two);
  font-size: 13px;
  background: #f7f8f9;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap .shop-sidebar__filter-btn {
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--primary);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item input[type=radio] {
  display: none;
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item input[type=radio]:checked+.color-dot {
  outline: 2px solid var(--orange);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot--yellow {
  background: var(--yellow);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot--green {
  background: var(--lime-green);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot--red {
  background: var(--red);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot--purple {
  background: var(--purple);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .color-dot--orange {
  background: var(--orange);
}

.shop-area .shop-sidebar__colors .shop-sidebar__color-item .count {
  color: var(--gray);
  margin-left: auto;
  font-size: 13px;
}

.shop-area .shop-sidebar__size .shop-sidebar__size-label {
  position: relative;
}

.shop-area .shop-sidebar__size .shop-sidebar__size-label input {
  display: none;
}

.shop-area .shop-sidebar__size .shop-sidebar__size-label input:checked+.shop-sidebar__size-btn {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.shop-area .shop-sidebar__size .shop-sidebar__size-btn {
  border: 1px solid var(--border-color-two);
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 8px;
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item .shop-sidebar__featured-thumb {
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color-two);
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item .shop-sidebar__featured-title {
  display: block;
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--primary);
  text-decoration: none;
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item .shop-sidebar__featured-title:hover {
  color: var(--orange);
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item .shop-sidebar__featured-price {
  font-size: 13px;
  color: var(--gray);
}

.shop-area .shop-sidebar__featured .shop-sidebar__featured-item .shop-sidebar__featured-price .muted {
  color: var(--border-color-two);
  font-size: 12px;
  margin-left: 6px;
}

.shop-area .shop-sidebar__tags .shop-sidebar__tags-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-area .shop-sidebar__tags .shop-sidebar__tags-wrap .shop-sidebar__tag {
  background: transparent;
  border: 1px solid var(--border-color-two);
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 13px;
  text-decoration: none;
  color: var(--primary);
  transition: 0.2s;
}

.shop-area .shop-sidebar__tags .shop-sidebar__tags-wrap .shop-sidebar__tag:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.shop-area .shop-sidebar {
  background: transparent;
  /* Responsive */
}

.shop-area .shop-sidebar__widget {
  background: #ffffff;
  border: 1px solid var(--border-color-two);
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.shop-area .shop-sidebar__widget:hover {
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.1);
}

.shop-area .shop-sidebar__widget .shop-sidebar__title {
  position: relative;
  color: var(--primary);
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border-color-two);
  margin-bottom: 24px;
}

.shop-area .shop-sidebar__widget .shop-sidebar__title:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--orange);
}

.shop-area .shop-sidebar__list,
.shop-area .shop-sidebar__color-list,
.shop-area .shop-sidebar__featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-area .shop-sidebar__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: var(--primary);
  padding: 10px 8px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.shop-area .shop-sidebar__item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__item .shop-sidebar__count {
  font-size: 13px;
  color: var(--gray);
}

.shop-area .shop-sidebar__price .shop-sidebar__range-values {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--secondary);
  margin-bottom: 10px;
}

.shop-area .shop-sidebar__price .shop-sidebar__range {
  width: 100%;
  height: 4px;
  accent-color: var(--orange);
  margin-bottom: 14px;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap .shop-sidebar__price-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color-two);
  border-radius: 8px;
  font-size: 13px;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap .shop-sidebar__filter-btn {
  background: var(--orange);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  transition: background 0.2s;
}

.shop-area .shop-sidebar__price .shop-sidebar__filter-btn-wrap .shop-sidebar__filter-btn:hover {
  background: var(--gray);
}

.shop-area .shop-sidebar__color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  font-size: 14px;
  color: var(--primary);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.shop-area .shop-sidebar__color-item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__color-item .color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.shop-area .shop-sidebar__color-item .color-dot--yellow {
  background: var(--yellow);
}

.shop-area .shop-sidebar__color-item .color-dot--green {
  background: var(--lime-green);
}

.shop-area .shop-sidebar__color-item .color-dot--red {
  background: var(--red);
}

.shop-area .shop-sidebar__color-item .color-dot--purple {
  background: var(--purple);
}

.shop-area .shop-sidebar__color-item .color-dot--orange {
  background: var(--orange);
}

.shop-area .shop-sidebar__color-item .count {
  margin-left: auto;
  color: var(--gray);
  font-size: 13px;
}

.shop-area .shop-sidebar__size-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-area .shop-sidebar__size-buttons .shop-sidebar__size-btn {
  display: block;
  border: 1px solid var(--border-color-two);
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-area .shop-sidebar__size-buttons .shop-sidebar__size-btn:hover,
.shop-area .shop-sidebar__size-buttons .shop-sidebar__size-btn.active {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.shop-area .shop-sidebar__featured-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.shop-area .shop-sidebar__featured-item:hover {
  background: #f7f8f9;
}

.shop-area .shop-sidebar__featured-item .shop-sidebar__featured-thumb {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color-two);
}

.shop-area .shop-sidebar__featured-item .shop-sidebar__featured-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.shop-area .shop-sidebar__featured-item .shop-sidebar__featured-price {
  font-size: 13px;
  color: var(--gray);
}

.shop-area .shop-sidebar__featured-item .shop-sidebar__featured-price .muted {
  text-decoration: line-through;
  margin-left: 4px;
  color: var(--border-color-two);
}

.shop-area .shop-sidebar__tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-area .shop-sidebar__tags-wrap .shop-sidebar__tag {
  border: 1px solid var(--border-color-two);
  background: transparent;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-area .shop-sidebar__tags-wrap .shop-sidebar__tag:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

@media only screen and (max-width: 991px) {
  .shop-area .shop-sidebar {
    margin-top: 24px;
  }
}

.shop-area .shop-main {
  /* product grid & cards */
}

.shop-area .shop-main__controls {
  border-radius: 20px;
  background: var(--white);
  padding: 25px 35px;
  margin-bottom: 30px;
}

.shop-area .shop-main__controls .shop-main__showing {
  color: var(--secondary);
  font-size: 13px;
}

.shop-area .shop-main__controls .shop-main__sort {
  min-width: 180px;
  border-radius: 10px;
  line-height: 2;
}

.shop-area .shop-main__controls .shop-main__sort:focus {
  box-shadow: none;
}

.shop-area .shop-main__controls .shop-main__view-toggle {
  display: flex;
  gap: 6px;
}

.shop-area .shop-main__controls .shop-main__view-toggle .shop-main__view-btn {
  border: 1px solid var(--border-color-two);
  background: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shop-area .shop-main__controls .shop-main__view-toggle .shop-main__view-btn--active {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

.shop-area .shop-main__grid .product-card {
  background: var(--white);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  border: 1px solid var(--border-color-two);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.shop-area .shop-main__grid .product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(180deg, rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%);
  border-radius: 10px;
  margin-bottom: 12px;
}

.shop-area .shop-main__grid .product-card__media .product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
}

.shop-area .shop-main__grid .product-card__media .product-card__img {
  width: 120px;
  height: auto;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

.shop-area .shop-main__grid .product-card__body {
  margin-top: auto;
  text-align: center;
}

.shop-area .shop-main__grid .product-card__body .product-card__rating {
  font-size: 13px;
  color: var(--orange);
  margin-bottom: 6px;
}

.shop-area .shop-main__grid .product-card__body .product-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 6px 0;
  color: var(--primary);
}

.shop-area .shop-main__grid .product-card__body .product-card__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

.shop-area .shop-main__grid .product-card__body .product-card__add {
  border: 1px solid var(--border-color-two);
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.shop-area .shop-main__grid .product-card__body .product-card__add--dark {
  background: var(--black);
  color: var(--white);
  border: none;
}

.shop-area .shop-main__pagination {
  margin-top: 60px;
}

.shop-area .shop-main__pagination .pagination .page-item .page-link {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color-two);
  margin: 0 6px;
  color: var(--primary);
  background: var(--white);
}

.shop-area .shop-main__pagination .pagination .page-item .page-link:focus {
  box-shadow: none;
}

.shop-area .shop-main__pagination .pagination .page-item.active .page-link {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

@media only screen and (max-width: 991px) {
  .shop-area .shop-area {
    padding: 28px 0;
  }

  .shop-area .shop-sidebar__widget {
    padding: 14px;
  }

  .shop-area .shop-main__controls {
    gap: 8px;
  }

  .shop-area .shop-main__grid .product-card {
    min-height: 300px;
  }

  .shop-area .shop-main__grid .product-card .product-card__img {
    width: 110px;
  }
}

@media only screen and (max-width: 767px) {
  .shop-area {
    /* Make the layout stack nicely: sidebar above products on small screens (HTML order already ensures this) */
  }

  .shop-area .shop-area {
    padding: 20px 0;
  }

  .shop-area .shop-sidebar {
    margin-bottom: 14px;
  }

  .shop-area .shop-main__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 5px;
  }

  .shop-area .shop-main__controls .shop-main__sort {
    width: 100%;
  }

  .shop-area .shop-main__grid .product-card {
    min-height: 260px;
  }

  .shop-area .shop-main__grid .product-card .product-card__img {
    width: 100px;
  }

  .shop-area .shop-main__pagination {
    margin-top: 12px;
  }
}

@media only screen and (max-width: 575px) {
  .shop-area .shop-sidebar__widget {
    padding: 12px;
    border-radius: 10px;
  }

  .shop-area .shop-sidebar__featured .shop-sidebar__featured-thumb {
    width: 44px;
    height: 44px;
  }

  .shop-area .shop-main__grid {
    row-gap: 14px;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }
}

/* .shop-area */
.product-details {
  background: #f4f6f8;
  /* IMAGE CARD (left) */
  /* PRODUCT INFO (right) */
  /* === RESPONSIVE === */
}

.product-details .product-details__image-card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* badge */
}

.product-details .product-details__image-card .product-details__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--black);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(11, 11, 11, 0.12);
  z-index: 5;
}

.product-details .product-details__image-card .product-details__image-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-details .product-details__image-card .product-details__img {
  max-width: 86%;
  height: auto;
  display: block;
  border-radius: 12px;
  -o-object-fit: contain;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(16, 24, 40, 0.08));
}

.product-details .product-details__info {
  padding-left: 18px;
}

.product-details .product-details__info .product-details__title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 15px;
}

.product-details .product-details__info .product-details__meta {
  margin-bottom: 12px;
}

.product-details .product-details__info .product-details__meta .product-details__rating .product-details__stars {
  font-size: 14px;
  color: #ffb800;
  letter-spacing: 1px;
  margin-right: 8px;
}

.product-details .product-details__info .product-details__meta .product-details__rating .product-details__reviews {
  font-size: 13px;
  color: var(--muted);
}

.product-details .product-details__info .product-details__meta .product-details__stock-pill {
  margin-left: auto;
  padding: 6px 20px;
  border-radius: 18px;
  align-self: center;
  font-family: var(--font_kanit);
  background: var(--white);
  color: var(--gray-two);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.product-details .product-details__info .product-details__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color-two);
}

.product-details .product-details__info .product-details__price-wrap .product-details__price--new {
  font-family: var(--font_instr);
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
}

.product-details .product-details__info .product-details__price-wrap .product-details__price--old {
  font-family: var(--font_instr);
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  text-decoration: line-through;
}

.product-details .product-details__info .product-details__desc {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border-color-two);
}

.product-details .product-details__info .product-details__divider {
  border: none;
  height: 1px;
  background: var(--border-color-two);
  margin: 8px 0 60px;
}

.product-details .product-details__info .product-details__controls {
  border-radius: 15px;
}

.product-details .product-details__info .product-details__controls .product-details__quantity {
  background: var(--white);
  border-radius: 10px;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.product-details .product-details__info .product-details__controls .product-details__quantity .product-details__qty-btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.product-details .product-details__info .product-details__controls .product-details__quantity .product-details__qty-btn:hover {
  background: rgba(16, 24, 40, 0.04);
}

.product-details .product-details__info .product-details__controls .product-details__quantity .product-details__qty-input {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: none;
  text-align: center;
  font-weight: 600;
  background: transparent;
  outline: none;
}

.product-details .product-details__info .product-details__controls .product-details__add-btn {
  min-width: 370px;
  transition: all 0.3s;
}

.product-details .product-details__info .product-details__controls .product-details__add-btn:hover {
  background: var(--primary);
  transform: translateY(-1px);
  color: var(--white);
}

.product-details__tabs {
  margin-top: 120px;
}

.product-details__tabs .product-details__tabs-nav {
  border-bottom: 1px solid var(--border-color-two);
}

.product-details__tabs .product-details__tabs-nav .nav-link {
  color: var(--primary);
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 10px 10px 0 0;
  transition: 0.3s;
}

.product-details__tabs .product-details__tabs-nav .nav-link.active {
  background: var(--orange);
  color: var(--white);
}

.product-details__tabs .product-details__tabs-nav .nav-link:hover {
  color: var(--black);
}

.product-details__tabs .product-details__text {
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.product-details__related .product-details__related-title {
  color: var(--primary);
  font-family: var(--font_instr);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  color: var(--primary);
  margin-bottom: 70px;
}

@media only screen and (max-width: 991px) {
  .product-details__info {
    margin-top: 20px;
    text-align: center;
  }

  .product-details .product-details__image-card {
    min-height: 320px;
    padding: 22px;
  }

  .product-details .product-details__image-card .product-details__img {
    max-width: 78%;
  }

  .product-details .product-details__info {
    padding-left: 0;
    margin-top: 6px;
  }

  .product-details .product-details__info .product-details__add-btn {
    min-width: 180px;
  }

  .product-details .product-details__meta {
    flex-wrap: wrap;
    gap: 8px;
  }

  .product-details .product-details__meta .product-details__stock-pill {
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .product-details .product-details__image-card {
    padding: 18px;
    border-radius: 12px;
    min-height: 260px;
  }

  .product-details .product-details__image-card .product-details__img {
    max-width: 92%;
  }

  .product-details .product-details__image-card .product-details__badge {
    top: 12px;
    left: 12px;
    font-size: 11px;
    padding: 5px 7px;
  }

  .product-details .product-details__info .product-details__title {
    font-size: 18px;
  }

  .product-details .product-details__info .product-details__price-wrap .product-details__price--new {
    font-size: 16px;
  }

  .product-details .product-details__info .product-details__price-wrap .product-details__price--old {
    font-size: 13px;
  }

  .product-details .product-details__info .product-details__controls {
    width: 100%;
    justify-content: space-between;
  }

  .product-details .product-details__info .product-details__controls .product-details__quantity {
    min-width: 110px;
  }

  .product-details .product-details__info .product-details__controls .product-details__add-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product-details .product-details__title {
    font-size: 1.4rem;
  }

  .product-details .product-details__tabs-nav .nav-link {
    font-size: 0.9rem;
    padding: 8px 10px;
  }

  .product-details .product-card {
    padding: 15px;
  }
}

.contact-area {
  position: relative;
  padding: 120px 0 0;
  overflow: hidden;
  /* Decorative dark background strip (positioned behind form) */
  /* Info row cards (top white boxes) */
  /* Heading */
  /* Form Card (dark) */
  /* Responsive adjustments */
}

.contact-area__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgb(5, 5, 5) 0%, rgba(16, 16, 16, 0.95) 100%);
  mix-blend-mode: normal;
  z-index: 1;
  /* subtle texture simulated via radial-gradients */
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.02), transparent 10%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02), transparent 12%), linear-gradient(180deg, rgb(8, 8, 8), rgb(16, 16, 16));
  filter: blur(0.2px);
}

.contact-area__info-row {
  position: relative;
  z-index: 3;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #f0f2f4;
}

.contact-area__info-row .row {
  display: flex;
  flex-wrap: wrap;
}

.contact-area__info-row .row>[class*="col-"] {
  display: flex;
}

.contact-area__info-row .contact-info-card {
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  border: 1px solid rgba(16, 24, 40, 0.03);
  min-height: 88px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contact-area__info-row .contact-info-card__title {
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: var(--primary);
  margin: 0 0 10px;
}

.contact-area__info-row .contact-info-card__text {
  color: var(--secondary);
  font-family: var(--font_kanit);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.contact-area__info-row .contact-info-card__social {
  display: flex;
  gap: 8px;
  align-items: center;
}

.contact-area__info-row .contact-info-card .social-circle {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-color-two);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
  transition: transform 0.12s ease, background 0.12s ease;
}

.contact-area__info-row .contact-info-card .social-circle:hover {
  transform: translateY(-3px);
  background: var(--green);
  color: var(--black);
}

.contact-area__heading {
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.4px;
  font-family: var(--font_instr);
  font-weight: 600;
  font-size: 72px;
  line-height: 82px;
  text-align: center;
  margin-bottom: 120px;
}

.contact-area .contact-form-card {
  padding: 90px 60px;
  border-radius: 10px;
  position: relative;
  z-index: 4;
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 12px 40px rgba(3, 3, 3, 0.45);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.contact-area .contact-form {
  position: relative;
  color: var(--white);
  /* Circular SEND button */
}

.contact-area .contact-form__top {
  margin-bottom: 18px;
}

.contact-area .contact-form__top .contact-form__input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  outline: none;
  font-size: 14px;
}

.contact-area .contact-form__top .contact-form__input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.contact-area .contact-form__top .contact-form__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.contact-area .contact-form__top .contact-form__input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.contact-area .contact-form__top select option {
  background-color: #ffffff;
  color: #000000;
}

.contact-area .contact-form__middle {
  margin: 22px 0;
}

.contact-area .contact-form__middle .contact-form__textarea {
  width: 100%;
  min-height: 120px;
  padding: 18px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  outline: none;
  font-size: 14px;
  resize: vertical;
}

.contact-area .contact-form__middle .contact-form__textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.contact-area .contact-form__middle .contact-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.contact-area .contact-form__middle .contact-form__textarea:focus {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Consent Checkbox Styles */
.contact-area .contact-form__consent {
  margin-top: 30px;
  padding: 0 10px;
}

.contact-area .contact-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  position: relative;
}

.contact-area .contact-form__consent-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.contact-area .contact-form__consent-checkmark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.contact-area .contact-form__consent-checkbox:checked+.contact-form__consent-checkmark {
  background: var(--green);
  border-color: var(--green);
}

.contact-area .contact-form__consent-checkbox:checked+.contact-form__consent-checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  font-size: 12px;
  color: var(--black);
}

.contact-area .contact-form__consent-text {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font_kanit);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

.contact-area .contact-form__consent-text a {
  color: var(--green);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.contact-area .contact-form__consent-text a:hover {
  color: var(--white);
}

.contact-area .contact-form__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  position: relative;
}

.contact-area .contact-form .contact-form__send {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  z-index: 6;
  padding: 0;
}

.contact-area .contact-form .contact-form__send:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.contact-area .contact-form .contact-form__send-text {
  color: var(--primary);
  font-family: var(--font_kanit);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-area .contact-form .contact-form__send .contact-form__send-icon {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .contact-area {
    padding: 40px 0 72px;
  }

  .contact-area__bg {
    top: 200px;
    height: 480px;
  }

  .contact-area__heading {
    font-size: 32px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-area {
    padding: 28px 0 56px;
  }

  .contact-area__bg {
    top: 160px;
    height: 420px;
  }

  .contact-area__heading {
    font-size: 28px;
    margin-bottom: 18px;
  }

  .contact-area .contact-form-card {
    padding: 22px;
  }

  .contact-area .contact-form__top {
    margin-bottom: 12px;
  }

  .contact-area .contact-form__middle {
    margin: 16px 0;
  }

  .contact-area .contact-form .contact-form__send {
    width: 78px;
    height: 78px;
  }
}

@media only screen and (max-width: 767px) {
  .contact-area {
    padding: 20px 0 48px;
  }

  .contact-area__info-row .contact-info-card {
    min-height: auto;
    padding: 14px;
  }

  .contact-area__heading {
    font-size: 22px;
    margin: 12px 0 14px;
    color: var(--primary);
    /* on small screens show dark heading for contrast */
  }

  .contact-area .contact-form-card {
    padding: 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.72);
  }

  .contact-area .contact-form__top .contact-form__input {
    padding: 10px 12px;
    font-size: 13px;
  }

  .contact-area .contact-form__middle .contact-form__textarea {
    padding: 12px;
    min-height: 90px;
    font-size: 13px;
  }

  .contact-area .contact-form .contact-form__send {
    width: 64px;
    height: 64px;
  }

  .contact-area__bg {
    top: 280px;
    height: 360px;
  }
}

@media only screen and (max-width: 575px) {
  .contact-area {
    padding: 16px 0 40px;
  }

  .contact-area .contact-form__send {
    width: 58px;
    height: 58px;
  }

  .contact-area .contact-form__input,
  .contact-area .contact-form__textarea {
    font-size: 13px;
  }

  .contact-area__heading {
    font-size: 20px;
  }

  .contact-area__bg {
    top: 240px;
    height: 300px;
  }
}

.map-box iframe {
  border: 0;
  width: 100%;
  height: 650px;
}

/*# sourceMappingURL=style.css.map */
/* Service Details List Item Animation */
.service-details__items-list li {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

.service-details__items-list li:hover {
  transform: translateX(10px) scale(1.02);
  color: var(--primary);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding-left: 15px;
  /* Adjust based on original padding */
}

/* Floating Animation for List Items */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

.service-details__items-list li {
  animation: float 4s ease-in-out infinite;
}

.service-details__items-list li:hover {
  animation-play-state: paused;
}

/* --- Refined Animations & Layout --- */

/* 1. Floating Animations preserving rotation */
@keyframes float-rotated {
  0% {
    transform: rotate(-10deg) translateY(0px);
  }

  50% {
    transform: rotate(-10deg) translateY(-6px);
  }

  100% {
    transform: rotate(-10deg) translateY(0px);
  }
}

@keyframes float-straight {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Apply specific floating animations */
.service-details__items-list .service-details__items-list-bt {
  animation: float-rotated 4s ease-in-out infinite !important;
}

.service-details__items-list .service-details__items-list-bt2 {
  animation: float-straight 4s ease-in-out infinite !important;
}

/* 2. Hover Effects */
.service-details__items-list li:hover {
  animation-play-state: paused !important;
  color: #f14f44 !important;
  /* User requested color */
  background-color: #FFF !important;
  /* Reset background or keep white */
  border-color: #f14f44 !important;
}

/* Preserve rotation on hover */
.service-details__items-list .service-details__items-list-bt:hover {
  transform: rotate(-10deg) scale(1.05) !important;
}

.service-details__items-list .service-details__items-list-bt2:hover {
  transform: scale(1.05) !important;
}

/* 3. Card Scroll Reveal Animation (Center to Left-Right) */
@keyframes cardReveal {
  0% {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: scale(1);
  }
}

/* Override WOW.js animation for cards */
.service-details__card.wow {
  visibility: hidden;
  /* Ensure hidden initially */
}

.service-details__card.wow.animated {
  animation-name: cardReveal !important;
  animation-duration: 0.8s !important;
  visibility: visible !important;
}

/* --- Attention-Grabbing Card Animation (3D Flip Up) --- */

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg) translateY(50px);
  }

  60% {
    transform: perspective(1000px) rotateX(20deg) translateY(-10px);
    /* Overshoot */
  }

  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateY(0);
  }
}

/* Override WOW.js animation for cards with new 3D Flip */
.service-details__card.wow.animated {
  animation-name: cardReveal !important;
  animation-duration: 1s !important;
  animation-fill-mode: both !important;
  visibility: visible !important;
  transform-origin: center top;
}

/* Add Strong Hover Effect for Interaction */
.service-details__card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-details__card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
  border-color: #f14f44;
  /* Match the list item hover color */
  z-index: 10;
  /* Bring to front */
}

/* --- Custom MWG Effect 025 (Attention Grabbing) --- */

/* Shine Animation */
@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

/* Pulse Animation */
@keyframes borderPulse {
  0% {
    border-color: rgba(241, 79, 68, 0.3);
    box-shadow: 0 0 0 0 rgba(241, 79, 68, 0.4);
  }

  50% {
    border-color: rgba(241, 79, 68, 0.8);
    box-shadow: 0 0 20px 0 rgba(241, 79, 68, 0.2);
  }

  100% {
    border-color: rgba(241, 79, 68, 0.3);
    box-shadow: 0 0 0 0 rgba(241, 79, 68, 0.4);
  }
}

.is-mwg_effect025 {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

/* Idle State: Gentle Pulse to grab attention even without hover */
.is-mwg_effect025 {
  animation: borderPulse 3s infinite;
}

/* Hover State: Strong Lift & Shine */
.is-mwg_effect025:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: #f14f44;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  background: #fff;
  /* Ensure background is solid for the shine */
}

/* Shine Effect Element */
.is-mwg_effect025::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 2;
  transition: none;
  pointer-events: none;
}

.is-mwg_effect025:hover::before {
  animation: shine 0.75s;
}

/* --- Professional Service Card Effects (Clean & Elegant) --- */

/* Reset any previous experimental transforms */
.service-details__card {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Smooth easing */
  border-bottom: 3px solid transparent;
  /* Prepare for accent */
  transform: translateY(0);
}

/* Professional Hover Effect: Lift + Soft Shadow + Accent */
.service-details__card:hover {
  transform: translateY(-10px);
  /* Gentle lift */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  /* Soft, deep shadow */
  border-bottom-color: #f14f44;
  /* Brand accent color */
  background: #fff;
}

/* Ensure WOW.js FadeInUp works cleanly */
.wow.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ===== Custom Service Details Content Styling ===== */

/* Content List Styling with Proper Bullets */
/* Content List Styling with Proper Bullets - Red Dot + Icon + Text */
.service-details__content-list {
  margin: 20px 0 30px 0;
  padding-left: 0;
  list-style: none;
}

.service-details__content-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
}

/* Red Dot */
.service-details__content-list li::before {
  content: "•";
  color: #f14f44;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  margin-top: -3px;
  /* Align with the top of the icon/text */
}

.service-details__content-list li .icon {
  display: flex;
  align-items: flex-start;
  margin-top: 4px;
}

.service-details__content-list li .icon svg {
  width: 15px;
  min-width: 15px;
}

.service-details__content-list li strong {
  color: #101010;
  font-weight: 600;
}

/* Spacing for Content Section Headings */
.service-details__content h4.service-details__content-title {
  margin-top: 45px;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 600;
  color: #101010;
  line-height: 1.3;
}

.service-details__content h4.service-details__content-title.mt-4 {
  margin-top: 35px;
}

.service-details__content h4.service-details__content-title.mt-5 {
  margin-top: 50px;
}

.service-details__content h5.service-details__content-subtitle {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.service-details__content h5.service-details__content-subtitle.mt-3 {
  margin-top: 20px;
}

/* Add spacing after the entire content section */
.service-details__content {
  margin-bottom: 60px;
}

/* Ensure proper paragraph spacing */
.service-details__content p.service-details__content-subtitle {
  margin-bottom: 25px;
  line-height: 1.7;
}

/* Tech Icon Hover Fix - DISABLED TO SHOW COLORS BY DEFAULT */
/*
.brand__item i {
  color: #333 !important;
  font-size: 70px !important;
  transition: all 0.5s;
}
*/

.brand-name {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-top: 5px;
}

.brand__item:hover .brand-name {
  color: #000;
}

/* DISABLED - Icons should show brand colors by default, not only on hover */
/*
.brand__item:hover i {
  color: #333 !important;
}
*/

/* Brand Specific Hover Colors - DISABLED, colors now shown by default via inline styles */
/*
.brand__item:hover .fa-react {
  color: #61DAFB !important;
}

.brand__item:hover .fa-node-js {
  color: #339933 !important;
}

.brand__item:hover .fa-python {
  color: #3776AB !important;
}

.brand__item:hover .fa-aws {
  color: #FF9900 !important;
}

.brand__item:hover .fa-docker {
  color: #2496ED !important;
}

.brand__item:hover .fa-google {
  color: #4285F4 !important;
}

.brand__item:hover .fa-github {
  color: #181717 !important;
}

.brand__item:hover .fa-gitlab {
  color: #FC6D26 !important;
}

.brand__item:hover .fa-jira {
  color: #0052CC !important;
}

.brand__item:hover .fa-slack {
  color: #4A154B !important;
}

.brand__item:hover .fa-figma {
  color: #F24E1E !important;
}

.brand__item:hover .fa-sketch {
  color: #F7B500 !important;
}

.brand__item:hover .fa-invision {
  color: #FF3366 !important;
}

.brand__item:hover .fa-adobe {
  color: #FF0000 !important;
}

.brand__item:hover .fa-wordpress {
  color: #21759B !important;
}

.brand__item:hover .fa-shopify {
  color: #7AB55C !important;
}

.brand__item:hover .fa-magento {
  color: #EE672F !important;
}

.brand__item:hover .fa-salesforce {
  color: #00A1E0 !important;
}

.brand__item:hover .fa-hubspot {
  color: #FF7A59 !important;
}

.brand__item:hover .fa-mailchimp {
  color: #FFE01B !important;
}

.brand__item:hover .fa-stripe {
  color: #008CDD !important;
}

.brand__item:hover .fa-paypal {
  color: #003087 !important;
}

.brand__item:hover .fa-android {
  color: #3DDC84 !important;
}

.brand__item:hover .fa-apple {
  color: #000000 !important;
}

.brand__item:hover .fa-windows {
  color: #0078D6 !important;
}

.brand__item:hover .fa-linux {
  color: #FCC624 !important;
}

.brand__item:hover .fa-ubuntu {
  color: #E95420 !important;
}

.brand__item:hover .fa-redhat {
  color: #EE0000 !important;
}

.brand__item:hover .fa-centos {
  color: #262577 !important;
}

.brand__item:hover .fa-fedora {
  color: #294172 !important;
}

.brand__item:hover .fa-java {
  color: #007396 !important;
}

.brand__item:hover .fa-js {
  color: #F7DF1E !important;
}

.brand__item:hover .fa-html5 {
  color: #E34F26 !important;
}

.brand__item:hover .fa-css3 {
  color: #1572B6 !important;
}

.brand__item:hover .fa-sass {
  color: #CC6699 !important;
}

.brand__item:hover .fa-less {
  color: #1D365D !important;
}

.brand__item:hover .fa-bootstrap {
  color: #7952B3 !important;
}

.brand__item:hover .fa-angular {
  color: #DD0031 !important;
}

.brand__item:hover .fa-vuejs {
  color: #4FC08D !important;
}
*/

.brand__item:hover .fa-laravel {
  color: #FF2D20 !important;
}

.brand__item:hover .fa-symfony {
  color: #000000 !important;
}

.brand__item:hover .fa-php {
  color: #777BB4 !important;
}

.brand__item:hover .fa-rust {
  color: #000000 !important;
}

.brand__item:hover .fa-swift {
  color: #F05138 !important;
}

.brand__item:hover .fa-kotlin {
  color: #0095D5 !important;
}

.brand__item:hover .fa-chrome {
  color: #4285F4 !important;
}

.brand__item:hover .fa-firefox {
  color: #FF7139 !important;
}

.brand__item:hover .fa-edge {
  color: #0078D7 !important;
}

.brand__item:hover .fa-safari {
  color: #000000 !important;
}

.brand__item:hover .fa-opera {
  color: #FF1B2D !important;
}

/* Process Card Styles - Figma Grade */
.process-card {
  background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  padding: 30px 24px;
  border-radius: 20px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  animation: cardEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes cardEntry {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.process-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.1) 55%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-card:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

.process-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.process-card:hover::after {
  opacity: 1;
}

.process-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.process-number {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.5px;
  animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.process-card:hover .process-number {
  color: #fff;
  transform: scale(1.1) translateY(-2px);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: none;
}

.process-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #fff;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

.process-card:hover .process-icon {
  transform: scale(1.2) rotate(8deg) translateY(-4px);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
  animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #f14f44;
}

@keyframes iconBounce {
  0% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.25) rotate(10deg);
  }

  100% {
    transform: scale(1.2) rotate(8deg);
  }
}

.process-title {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.3px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-card:hover .process-title {
  transform: translateY(-2px);
  text-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.6px;
  color: #f14f44;
}

/* Staggered animation delays */
.process-card:nth-child(1) {
  animation-delay: 0.1s;
}

.process-card:nth-child(2) {
  animation-delay: 0.2s;
}

.process-card:nth-child(3) {
  animation-delay: 0.3s;
}

.process-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* Fluid Cursor */
#smokey-fluid-canvas {
  z-index: 999999 !important;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

/* Custom Hover Effects for Service Section */
.service-section__wrap .logo img {
  transition: all 0.3s ease-in-out;
}

.service-section__wrap:hover .service-section__item .content .title a {
  color: var(--red);
}

.service-section__wrap:hover .service-section__item .service-section__bottom .icon .project-btn {
  background-color: var(--red);
}

.service-section__wrap:hover .service-section__item .service-section__bottom .icon .project-btn svg path {
  stroke: var(--white);
}

.service-section__wrap:hover .logo img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(1686%) hue-rotate(338deg) brightness(96%) contrast(96%);
}

.service-section__info .rr-btn-border:hover .icon {
  background-color: var(--red);
}

.service-section__info .rr-btn-border:hover .icon svg path {
  stroke: var(--white);
}

/* Video Section Icon Hover Effect */
.video-section__play .icon {
  transition: all 0.4s ease-in-out;
}

.video-section__play .icon:hover {
  transform: scale(1.1) rotate(5deg);
  background-color: var(--primary);
}

.video-section__play .icon:hover svg rect {
  stroke: var(--white);
}

/* Light Background for Footer 5-Column Section - Full Viewport Width */
.footer-light-section {
  position: relative;
  width: 100%;
  background: #f5f5f5;
  padding: 60px 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.footer-light-section .footer-area4-widget__title {
  color: #101010 !important;
}

.footer-light-section .footer-area4-widget__nav-link {
  color: rgba(16, 16, 16, 0.7) !important;
}

.footer-light-section .footer-area4-widget__nav-link:hover {
  color: #f14f44 !important;
}

/* Brand Slider Updates */
.brand-section-5__item {
  flex-direction: column !important;
  width: 300px !important;
  /* Stretched width */
  height: 180px !important;
  /* Slightly taller for text */
  padding: 20px;
  background: #ffffff;
  /* White background to match logos */
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-section-5__item img {
  object-fit: contain;
  max-width: 90%;
  max-height: 72px;
  /* Reduced by 10% from 80px */
  width: auto;
  height: auto;
  padding: 5px;
  /* Add padding to prevent edge cutting */
}

/* Lovable logo - 50% smaller */
.brand-section-5__item img[alt="Lovable"] {
  max-height: 40px;
}

/* CCAvenue logo - 30% larger */
.brand-section-5__item img[alt="CCAvenue"] {
  max-height: 104px;
}

.brand-section-5__item .brand-name {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  font-family: var(--font_kanit);
  text-align: center;
}

/* Ensure full width */
.brand-slide-5__area {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

.brand-slide-5__area .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix Marquee Text Clipping and Centering */
.marque-style-red-white {
  padding: 05px 0px !important;
  display: flex !important;
  align-items: center !important;
}

.marque-style-red-white .marquee-inner {
  position: relative !important;
  display: flex;
  align-items: center;
}

.marque-style-red-white .text-slider-3,
.marque-style-red-white .text-slider-4 {
  font-size: 90px !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Custom Marquee Style for Branding Page (and others using slider 3/4) */
.marque-style-red-white .text-slider-4 {
  color: var(--red);
  -webkit-text-stroke-width: 0;
  opacity: 1;
}

/* ============================================
   Professional Submenu Enhancement Styles
   ============================================ */

/* Main dropdown container - enhanced styling */
.header-area .main-menu ul.dp-menu {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.98), rgba(35, 37, 41, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px 0;
  border-radius: 16px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced 2-column layout for Services */
.header-area .main-menu ul.dp-menu.column-2 {
  width: 520px;
  column-count: 2;
  column-gap: 0;
  padding: 24px 12px;
  column-rule: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dropdown appear animation */
.header-area .main-menu>ul>li:hover>ul.dp-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Individual menu items */
.header-area .main-menu ul.dp-menu li {
  position: relative;
  padding: 0 12px;
  break-inside: avoid;
}

/* Menu links - enhanced styling */
.header-area .main-menu ul.dp-menu li a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  padding: 12px 16px;
  background: transparent;
  border-radius: 10px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover glow effect background */
.header-area .main-menu ul.dp-menu li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(241, 79, 68, 0.15) 0%,
      rgba(241, 79, 68, 0.05) 50%,
      transparent 100%);
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.4s ease;
  border-radius: 10px;
}

/* Animated left accent bar */
.header-area .main-menu ul.dp-menu li a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--red) 0%, #ff6b5b 100%);
  border-radius: 0 3px 3px 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state for menu links */
.header-area .main-menu ul.dp-menu li a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  padding-left: 22px;
  letter-spacing: 0.5px;
}

.header-area .main-menu ul.dp-menu li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.header-area .main-menu ul.dp-menu li a:hover::after {
  transform: translateY(-50%) scaleY(1);
}

/* Active/hover color for links */
.header-area .main-menu ul.dp-menu li:hover>a {
  color: var(--white);
}

/* Icon enhancement for menu items with icon indicator */
.header-area .main-menu ul.dp-menu li a i,
.header-area .main-menu ul.dp-menu li a svg {
  margin-right: 12px;
  font-size: 16px;
  color: var(--red);
  transition: all 0.3s ease;
}

.header-area .main-menu ul.dp-menu li a:hover i,
.header-area .main-menu ul.dp-menu li a:hover svg {
  transform: scale(1.1);
}

/* Subtle separator between groups (every 6th item in 2-column) */
.header-area .main-menu ul.dp-menu.column-2 li:nth-child(6n):not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Dropdown arrow animation enhancement */
.header-area .main-menu li.menu-item-has-children>a::after {
  transition: transform 0.3s ease, color 0.3s ease;
}

.header-area .main-menu li.menu-item-has-children:hover>a::after {
  transform: rotate(180deg);
  color: var(--red);
}

/* Top corner accent */
.header-area .main-menu ul.dp-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  border-radius: 0 0 3px 3px;
}

/* Responsive adjustments */
@media only screen and (max-width: 1399px) {
  .header-area .main-menu ul.dp-menu.column-2 {
    width: 480px;
    padding: 20px 10px;
  }

  .header-area .main-menu ul.dp-menu li a {
    font-size: 13px;
    padding: 10px 14px;
  }
}

@media only screen and (max-width: 1199px) {
  .header-area .main-menu ul.dp-menu.column-2 {
    width: 420px;
  }
}

/* Staggered animation for menu items */
.header-area .main-menu ul.dp-menu li {
  opacity: 0;
  transform: translateX(-10px);
  animation: slideInMenuItem 0.3s ease forwards;
}

.header-area .main-menu>ul>li:hover>ul.dp-menu li {
  opacity: 1;
  transform: translateX(0);
}

/* Animation delays for staggered effect */
.header-area .main-menu ul.dp-menu li:nth-child(1) {
  animation-delay: 0.05s;
}

.header-area .main-menu ul.dp-menu li:nth-child(2) {
  animation-delay: 0.08s;
}

.header-area .main-menu ul.dp-menu li:nth-child(3) {
  animation-delay: 0.11s;
}

.header-area .main-menu ul.dp-menu li:nth-child(4) {
  animation-delay: 0.14s;
}

.header-area .main-menu ul.dp-menu li:nth-child(5) {
  animation-delay: 0.17s;
}

.header-area .main-menu ul.dp-menu li:nth-child(6) {
  animation-delay: 0.20s;
}

.header-area .main-menu ul.dp-menu li:nth-child(7) {
  animation-delay: 0.23s;
}

.header-area .main-menu ul.dp-menu li:nth-child(8) {
  animation-delay: 0.26s;
}

.header-area .main-menu ul.dp-menu li:nth-child(9) {
  animation-delay: 0.29s;
}

.header-area .main-menu ul.dp-menu li:nth-child(10) {
  animation-delay: 0.32s;
}

.header-area .main-menu ul.dp-menu li:nth-child(11) {
  animation-delay: 0.35s;
}

.header-area .main-menu ul.dp-menu li:nth-child(12) {
  animation-delay: 0.38s;
}

.header-area .main-menu ul.dp-menu li:nth-child(13) {
  animation-delay: 0.41s;
}

.header-area .main-menu ul.dp-menu li:nth-child(14) {
  animation-delay: 0.44s;
}

.header-area .main-menu ul.dp-menu li:nth-child(15) {
  animation-delay: 0.47s;
}

.header-area .main-menu ul.dp-menu li:nth-child(16) {
  animation-delay: 0.50s;
}

.header-area .main-menu ul.dp-menu li:nth-child(17) {
  animation-delay: 0.53s;
}

.header-area .main-menu ul.dp-menu li:nth-child(18) {
  animation-delay: 0.56s;
}

.header-area .main-menu ul.dp-menu li:nth-child(19) {
  animation-delay: 0.59s;
}

.header-area .main-menu ul.dp-menu li:nth-child(20) {
  animation-delay: 0.62s;
}

.header-area .main-menu ul.dp-menu li:nth-child(21) {
  animation-delay: 0.65s;
}

.header-area .main-menu ul.dp-menu li:nth-child(22) {
  animation-delay: 0.68s;
}

@keyframes slideInMenuItem {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Blog submenu - single column styling */
.header-area .main-menu ul.dp-menu:not(.column-2) {
  width: 260px;
  padding: 16px 8px;
}

/* Hover glow effect on dropdown container */
.header-area .main-menu ul.dp-menu:hover {
  box-shadow:
    0 25px 60px -12px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 40px rgba(241, 79, 68, 0.1);
}

/* ============================================
   MOBILE-ONLY FIXES (Won't affect desktop)
   Added: Dec 16, 2025
   ============================================ */

/* Mobile: Features Section Form Layout Fix (<768px only) */
@media only screen and (max-width: 767px) {
  .features-section__form .ts-subscribe-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .features-section__form .ts-subscribe-form .form-control {
    max-width: 100%;
    width: 100%;
  }

  .features-section__form .ts-subscribe-form .rr-btn-border {
    width: 100%;
    justify-content: center;
  }
}

/* Fix invisible arrow on white button features section (Mobile Only) */
@media only screen and (max-width: 991px) {
  .features-section__form .ts-subscribe-form .rr-btn-border svg path {
    stroke: #191919 !important;
  }
}

/* Mobile: Project Section Date Fix (<768px only) */
@media only screen and (max-width: 767px) {
  .project-section__content .date {
    position: static;
    transform: none;
    display: inline-block;
    margin-top: 15px;
    font-size: 28px;
  }
}

/* Small Mobile: Additional Adjustments (<576px only) */
@media only screen and (max-width: 575px) {
  .features-section__form .ts-subscribe-form .form-control {
    padding: 14px 16px;
    font-size: 14px;
  }

  .project-section__content .date {
    font-size: 24px;
  }
}

/* ============================================
   MOBILE: Project Section Alternating Layout
   Reorder items: Image, Card, Image, Card pattern
   Added: Dec 16, 2025
   ============================================ */

@media only screen and (max-width: 767px) {
  /* DOM order: thumb(1), card(2), card(3), thumb(4), thumb(5), card(6), card(7), thumb(8) */
  /* Target order: thumb(1), card(2), thumb(4), card(3), thumb(5), card(6), thumb(8), card(7) */

  .project-section__wrapper {
    display: flex;
    flex-direction: column;
  }

  /* Item 1: thumb - stays at position 1 */
  .project-section__wrapper>.project-section__thumb:nth-child(1) {
    order: 1;
  }

  /* Item 2: card (Web Dev) - stays at position 2 */
  .project-section__wrapper>.project-section__card:nth-child(2) {
    order: 2;
  }

  /* Item 3: card (Branding) - moves to position 4 */
  .project-section__wrapper>.project-section__card:nth-child(3) {
    order: 4;
  }

  /* Item 4: thumb - moves to position 3 */
  .project-section__wrapper>.project-section__thumb:nth-child(4) {
    order: 3;
  }

  /* Item 5: thumb - stays at position 5 */
  .project-section__wrapper>.project-section__thumb:nth-child(5) {
    order: 5;
  }

  /* Item 6: card (AI Chatbot) - stays at position 6 */
  .project-section__wrapper>.project-section__card:nth-child(6) {
    order: 6;
  }

  /* Item 7: card (Web Apps) - moves to position 8 */
  .project-section__wrapper>.project-section__card:nth-child(7) {
    order: 8;
  }

  /* Item 8: thumb - moves to position 7 */
  .project-section__wrapper>.project-section__thumb:nth-child(8) {
    order: 7;
  }

  /* Fix: Constrain parallax image containers on mobile */
  .project-section__thumb {
    position: relative;
    overflow: hidden;
    height: 280px;
    min-height: 280px;
  }

  .project-section__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================
   MOBILE: Hero Section Layout Fix
   Restore backup behavior - h4 NEXT TO h3
   Added: Dec 16, 2025
   ============================================ */
/* Hero Section Mobile Reordering */
@media (max-width: 1199px) {
  .hero-services-1 {
    order: 2;
  }

  .hero-services-2 {
    order: 3;
  }

  .hero-about-1 {
    order: 1;
  }

  .hero-about-2 {
    order: 4;
  }
}


/* Mobile Footer: Single Column Centered */
@media only screen and (max-width: 767px) {
  .footer-area6-main .d-flex {}

  .footer-area4-widget {
    width: 100%;
  }
}


/* STRICT Footer Centering Fix for Mobile */
@media only screen and (max-width: 767px) {
  .footer-area6-main .d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
  }

  .footer-area4-widget {
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-area4-widget__title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
  }

  .footer-area4-widget__nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .footer-area4-widget__nav-link {
    text-align: center !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}

/* Fix for Recent Posts thumbnails in Sidebar */
.main-sidebar2-widget__post-items-thumb img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
}

/* Fix for inner blog post images */
.blog-details-wrapper-items-tag__thumb img {
  width: 100%;
  height: 450px;
  /* Match backup height */
  object-fit: cover;
  border-radius: 20px;
}

@media only screen and (max-width: 767px) {
  .blog-details-wrapper-items-tag__thumb img {
    height: 300px;
  }
}

/* === Policy pages heading spacing fix === */
/* Ensures headings on Terms, Privacy, Disclaimer, and Cancellation pages
   appear below the fixed navigation header */
.policy-page-content {
  padding-top: 180px;
}

@media only screen and (max-width: 1199px) {
  .policy-page-content {
    padding-top: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .policy-page-content {
    padding-top: 120px;
  }
}