/*!
Theme Name: KinessoCustom-ipgmb-2024
Theme URI: http://underscores.me/
Author: Webdev Team
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ipgmb-2024
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

KinessoCustom is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Fonters */
@font-face {
  font-family: "Fonters";
  src: url("asset/font/Fonters.otf") format("opentype"),
    url("asset/font/Fonters.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FranklinGothic URW";
  src: url("asset/font/FranklinGothicURW-Med.eot");
  src: url("asset/font/FranklinGothicURW-Med.eot?#iefix")
      format("embedded-opentype"),
    url("asset/font/FranklinGothicURW-Med.woff2") format("woff2"),
    url("asset/font/FranklinGothicURW-Med.woff") format("woff"),
    url("asset/font/FranklinGothicURW-Med.ttf") format("truetype"),
    url("asset/font/FranklinGothicURW-Med.svg#FranklinGothicURW-Med")
      format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

/* FRADM */
@font-face {
  font-family: "FranklinGothic-Demi";
  src: url("asset/font/FRADM.woff2") format("woff2"),
    url("asset/font/FRADM.woff") format("woff"),
    url("asset/font/FRADM.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* FRADMCN */
@font-face {
  font-family: "Franklin Gothic Demi Cond";
  src: url("asset/font/FRADMCN.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Franklin Gothic */
@font-face {
  font-family: "FranklinGothic-Medium";
  src: url("asset/font/FranklinGothicMediumRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  height: 100%;
  overflow: auto;
  margin: 0;
  font-family: "FranklinGothic-Medium", sans-serif;
  font-size: 17px;
  background: #202020;
  text-rendering: optimizeLegibility;
}

body,
h1 {
  -webkit-font-smoothing: antialiased;
}

p {
  font-family: "FranklinGothic-Medium", sans-serif;
  font-size: 17px;
  margin: 0;
}

h1 {
  font-family: "FranklinGothic-Demi", sans-serif;
  font-size: 76px;
  line-height: 79px;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

h2 {
  font-family: "FranklinGothic-Demi", sans-serif;
  font-size: 33px;
  line-height: 33px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
}

a {
  color: #fff;
  text-decoration: underline;
}
a:hover {
  color: #b4b3b4;
}

.container-header {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  max-height: 70px;
  height: 70px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.container-1100 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

.container-650 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

.contact-us {
  background-color: #1f1f1f;
  color: #fff;
  padding: 60px 0;
}
.contact-us h2 {
  margin-bottom: 20px;
  font-family: "FranklinGothic-Demi", sans-serif;
  font-size: 33px;
  line-height: 80px;
  width: fit-content;
}
.contact-us p {
  font-size: 17px;
  line-height: 34px;
  font-family: "FranklinGothic-Medium", sans-serif;
}
.contact-us .office {
  margin-bottom: 60px;
}

.container-1280 {
  max-width: 1280px;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

.site-header {
  position: relative;
  z-index: 10;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between; /* Spread logo, nav, and sidebar evenly */
  align-items: center; /* Vertically align items */
}

/* Logo Styling */
.logo img {
  height: 30px; /* Adjust the height of the logo */
  display: block;
}

.main-nav {
  position: relative;
  display: flex;
  height: 65px;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  background-color: rgba(15, 15, 15, 0.5); /* Adjust this as needed */
  padding: 0 20px;
  border-radius: 50px; /* Border radius applied */
  z-index: 1;
}

.sidebar-menu {
  display: none;
}

.main-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* Define the thickness of the border here */
  border-radius: 50px; /* Same radius to match the element */
  background: linear-gradient(
    90deg,
    #6586ba 0%,
    #7376ac 6%,
    #9e4985 25%,
    #b92d6d 40%,
    #c32365 49%,
    #d5393b 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1; /* Place the pseudo-element behind the content */
}

.main-nav ul {
  display: flex;
  gap: 30px; /* Space between the nav items */
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav ul li a {
  text-decoration: none;
  color: #fff; /* Text color for nav items */
  font-weight: 500;
  transition: color 0.3s ease;
}

.sidebar-menu .menu-toggle {
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.container-footer {
  background-color: #1f1f1f;
  color: #fff;
  padding: 70px 0;
  text-align: center;
  border-top: 1px solid #fff;
}
.slider-hero-content--innerdesc {
  margin-bottom: 50px;
}
.site-info {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-copyright {
  color: #898989;
  margin: 25px 0;
}
.footer-logo {
  max-height: 30px; /* Adjust logo size */
}

.footer-left p {
  margin: 0;
  font-size: 14px;
}

.footer-right {
  display: flex;
  align-items: center;
}

.footer-nav {
  display: flex;
  gap: 15px;
}

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

.footer-menu li {
  display: inline-block;
  margin-right: 20px;
}

.footer-menu li a:hover {
  text-decoration: underline; /* Optional hover effect */
}

.footer-menu li a {
  color: #898989;
  text-decoration: none;
  font-size: 17px;
  text-transform: uppercase;
}

.main-nav ul.menu-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px; /* Adjust spacing between menu items */
}

.main-nav ul.menu-list li {
  display: inline-block;
}

.main-nav ul.menu-list li a {
  text-decoration: none;
  color: #898989; /* Adjust this to your desired text color */
  font-size: 17px;
  padding: 10px 15px;
}

.main-nav ul.menu-list li a:hover {
  color: #fff; /* Hover effect */
}

.main-nav ul.menu-list li.current-menu-item a {
  color: #fff; /* Active menu item color */
}

.full-height-hero-image-with-title {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100vh; /* Full height of the viewport */
  display: flex;
  align-items: center;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Vertically center other items */
  color: white;
  z-index: 1; /* Make sure it's behind the header */
  margin-top: -70px; /* Adjust this to the height of your header */
}

/* Content inside the hero section */
.hero-content {
  z-index: 5; /* Ensure the content is above the background image */
  position: relative;
  margin-top: auto;
  padding-top: 50px;
}

.hero-title {
  margin-bottom: 10px;
  font-weight: normal;
}

.hero-content-inner {
  width: 600px;
}

.hero-description {
  font-size: 1.5rem;
  margin-bottom: 30px;
}

/* Scroll down arrow styling */
.next-section {
  margin-top: auto;
  padding-bottom: 50px;
}

.next-section a img {
  width: 76px;
  height: 76px;
  cursor: pointer;
  display: block;
}

.next-section .hover {
  display: none;
}

.next-section a:hover .hover {
  display: block;
}

.next-section a:hover .nonhover {
  display: none;
}

/* Optional: Dark overlay for better contrast */
.full-height-hero-image-with-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* Sidebar container */
.sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #000;
  color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.4s ease;
  z-index: 10000;
  overflow-y: auto; /* Allow scrolling when content overflows */
  padding-top: 50px; /* Add padding for top space */
}

/* Sidebar open state */
.sidebar.open {
  right: 0;
}

/* Close button styling */
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Sidebar links */
.sidebar ul {
  list-style: none;
  padding: 0;
  padding-left: 35px;
  padding-right: 35px;
}

.location-in-menu {
  background-color: #fff;
  color: #000;
  padding: 8px 0px 8px 50px;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  line-height: 16px;
  font-family: "FranklinGothic-Medium", sans-serif;
  display: block;
  padding: 10px 15px; /* Add padding to align with design */
  transition: background-color 0.3s ease;
  border-radius: 5px; /* Rounded corners for link hover effect */
}

.sidebar ul li a:hover {
  background: transparent
    linear-gradient(
      90deg,
      #6586ba 0%,
      #7376ac 6%,
      #9e4985 25%,
      #b92d6d 40%,
      #c32365 49%,
      #d5393b 100%
    )
    0% 0% no-repeat padding-box;
  border-radius: 24px;
}

.sidebar ul .current-menu-item a {
  background: transparent
    linear-gradient(
      90deg,
      #6586ba 0%,
      #7376ac 6%,
      #9e4985 25%,
      #b92d6d 40%,
      #c32365 49%,
      #d5393b 100%
    )
    0% 0% no-repeat padding-box;
  border-radius: 24px;
}

/* Submenu */
.sidebar ul li.has-submenu > a {
  font-weight: bold;
}

.sidebar ul li ul.submenu {
  padding-left: 15px;
  display: none;
}

.sidebar ul li.has-submenu:hover ul.submenu {
  display: block;
}

/* Toggle button styling */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  right: 6px;
  top: 20px;
  z-index: 9999;
}

/* Optional: Add some hover effects */
.menu-toggle img {
  width: 61.86px;
  height: 61.86px;
}

/* Scrollbar Styling (Optional for better UX) */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 10px;
}

/* Handle current active menu item */
.sidebar ul li a.current-menu-item {
  background-color: #444;
  font-weight: bold;
}

/* Ensure submenu items are smaller in font size */
.submenu li a {
  font-size: 16px;
}

/* Swiper container */
.swiper-container {
  width: 100%;
  height: 100vh; /* Full height */
  max-height: 100vh;
  overflow: hidden;
  margin-top: -70px;
}

/* Swiper Slide */
.swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Hero content */
.swiper-container .slider-hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%); /* Vertically center the content */
  z-index: 2;
  color: white;
  text-align: left; /* Ensure content is left-aligned */
}

.swiper-container .slider-hero-content--inner {
  max-width: 550px;
}
.swiper-container .slider-hero-content--inner h1 {
  margin-bottom: 0.6em;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Pagination styling for vertical layout */
.swiper-pagination {
  position: absolute;
  right: 50px !important; /* Align dots to the right */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* Stack dots vertically */
  z-index: 1 !important; /* Ensure dots are above the content */
}

.swiper-pagination-bullet {
  background: white;
  opacity: 0.5;
  margin-bottom: 10px; /* Spacing between dots */
}

.swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}

.hero-button {
  position: relative;
  margin-top: 20px;
  padding: 15px 30px;
  background: none;
  border: 1.1px solid transparent; /* Transparent to allow gradient in ::before */
  color: white;
  border-radius: 32px;
  text-decoration: none;
  z-index: 1; /* Ensure the button content stays above ::before */
  transition: background-color 0.3s ease;
  display: inline-block;
}

.hero-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.1px; /* Adjust to control the border thickness */
  border-radius: 32px; /* Match the button's border radius */
  background: linear-gradient(
    90deg,
    #6586ba 0%,
    #7376ac 6%,
    #9e4985 25%,
    #b92d6d 40%,
    #c32365 49%,
    #d5393b 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1; /* Make sure the gradient appears behind the button content */
  transition: all 0.3s ease;
}

.arrow-right {
  margin-left: 20px;
}
.next-section-inner {
  position: relative;
}
.hero-button:hover {
  background: transparent
    linear-gradient(
      90deg,
      #6586ba 0%,
      #7376ac 6%,
      #9e4985 25%,
      #b92d6d 40%,
      #c32365 49%,
      #d5393b 100%
    )
    0% 0% no-repeat padding-box;
  color: #fff;
}

.dark {
  background-color: #1f1f1f;
}
.small_content_with_header--inner {
  padding-top: 70px;
  padding-bottom: 70px;
  color: #fff;
}

.small_content_with_header--inner .header-h2 {
  margin-bottom: 30px;
}
.small_content_with_header--inner-content {
  color: #b4b3b4;
  font-family: "FranklinGothic-Medium", sans-serif;
  font-size: 17px;
  line-height: 34px;
}

.our-brand-section {
  padding: 50px 20px;
  background-color: #1f1f1f;
}

.mb-brand-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Individual brand item */
.mb-brand {
  position: relative;
  overflow: hidden;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center; /* Center the logo vertically */
  transition: transform 0.3s ease;
  border: 1px solid #fff;
  margin-left: -1px;
  margin-top: -1px; /* Shift the items slightly up and left */
}

.mb-brand-image {
  text-align: center;
}
/* Logo image inside the brand item */
.mb-brand img {
  width: 90%; /* Adjust the width to scale the logo */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure the image fits within the container */
  transition: transform 0.3s ease;
}

.mb-brand:hover img {
  transform: scale(1.1); /* Slight zoom on hover */
}

.mb-brand-info {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mb-brand:hover .mb-brand-info {
  opacity: 1;
}

.mb-brand-info h2 {
  font-size: 17px;
  color: white;
  margin-bottom: 10px;
}

.mb-brand-info p {
  font-size: 14px;
  font-family: "FranklinGothic-Medium", sans-serif;
  color: #b4b4b5;
  line-height: 19px;
  margin-bottom: 10px;
}

.mb-brand-link {
  display: inline-block;
  color: white;
  font-size: 13px;
  font-family: "Franklin Gothic Medium", sans-serif;
  padding: 10px 40px;
}

/* Tablet view (3 items per row) */
@media (max-width: 1024px) {
  .mb-brand-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .mb-brand {
    height: 235px; /* Slightly reduce height on tablets */
  }
}

/* Mobile view (2 items per row) */
@media (max-width: 768px) {
  .mb-brand-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.swiper-pagination .swiper-pagination-bullet-active {
  background: white !important;
}
.swiper-pagination-bullet {
  background: transparent !important;
  height: 10px !important;
  width: 10px !important;
  border: 1px solid #fff;
}

.mb-staff-arrow {
  position: relative;
  width: 30px;
  height: 15px;
}
.mb-staff-arrow-inner {
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 0;
  height: 0;
  z-index: 2;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #1f1f1f;
  transition: border-bottom-width 0.25s ease-in-out;
  -webkit-transition: border-bottom-width 0.25s ease-in-out;
}
.mb-staff-arrow-outer {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 1;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #969697;
  transition: border-bottom-width 0.25s ease-in-out;
  -webkit-transition: border-bottom-width 0.25s ease-in-out;
}
.mb-staff-arrow.flat .mb-staff-arrow-inner {
  border-bottom-width: 0;
}
.mb-staff-arrow.flat .mb-staff-arrow-outer {
  border-bottom-width: 1px;
}

.hide {
  display: none;
}
.leader-wrapper {
  display: block;
  float: left;
  margin: 0 50px 50px 50px;
  width: calc(100% - 100px);
}
.leader-content {
  box-sizing: content-box;
  color: #ffffff;
  float: left;
  margin: 0 auto; /* Center the content */
  padding-top: 1em;
  width: auto;
  max-width: 1200px; /* Limit the width */
}
.leader-content .mb-staff-arrow {
  margin: -15px 0 0 87%;
}
@media screen and (min-width: 640px) {
  .leader-content .mb-staff-arrow {
    margin: -15px 0 0 25%;
  }
}
@media screen and (min-width: 1024px) {
  .leader-content .mb-staff-arrow {
    margin: -15px 0 0 12.5%;
  }
}
@media screen and (min-width: 692px) {
  .leader-content {
    margin: 2em 0 0 -16em;
    width: calc(200% + 1em);
    padding: 0 0 0 16em;
  }
  #leader-accordion li:nth-of-type(2n + 2) .leader-content {
    margin: 2em 0 0 -45.5em;
    width: calc(200% + 1em);
    padding: 0 0 0 16em;
  }
  #leader-accordion li:nth-of-type(2n + 2) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 85%;
  }
}
@media screen and (min-width: 692px) and (max-width: 1023px) {
  #leader-accordion li:nth-of-type(2n + 2) .leader-content {
    padding: 1em 16em 1em 0;
    margin: 2em 0 0 -48vw;
  }
  #leader-accordion li:nth-of-type(2n + 2) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 85%;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1240px) {
  .leader-content {
    margin: 3em auto 2em auto;
    width: calc(400% - -2.4em);
    padding: 0;
  }
  #leader-accordion li:nth-of-type(4n + 2) .leader-content {
    margin: 3em 0 2em -50vw;
    width: calc(400% - -2.8em);
  }
  #leader-accordion li:nth-of-type(4n + 2) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 42%;
  }
  #leader-accordion li:nth-of-type(4n + 3) .leader-content {
    margin: 3em 0 2em -49vw;
    width: calc(400% - -2.8em);
  }
  #leader-accordion li:nth-of-type(4n + 3) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 70%;
  }
  #leader-accordion li:nth-of-type(4n + 4) .leader-content {
    margin: 3em 0 2em -99vw;
    width: calc(400% - -2.8em);
  }
  #leader-accordion li:nth-of-type(4n + 4) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 95%;
  }
}
/* For screens 1241px and larger */
@media screen and (min-width: 1241px) {
  .leader-content {
    margin: 3em auto 2em auto;
    width: calc(400% - -2.4em); /* Adjusted the negative calc value */
    padding: 0;
  }
  #leader-accordion li:nth-of-type(4n + 2) .leader-content {
    margin: 3em 0 2em -568px;
    width: calc(400% - -2.4em); /* Removed unnecessary negative sign */
  }
  #leader-accordion li:nth-of-type(4n + 2) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 35%; /* Ensuring margin percentage is consistent */
  }
  #leader-accordion li:nth-of-type(4n + 3) .leader-content {
    margin: 3em 0 2em -588px;
    width: calc(400% - -2.8em); /* Removed unnecessary negative sign */
  }
  #leader-accordion li:nth-of-type(4n + 3) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 60%;
  }
  #leader-accordion li:nth-of-type(4n + 4) .leader-content {
    margin: 3em 0 2em -1156px;
    width: calc(400% - -2.1em); /* Removed unnecessary negative sign */
  }
  #leader-accordion li:nth-of-type(4n + 4) .leader-content .mb-staff-arrow {
    margin: -15px 0 0 85%;
  }
}

#leader-accordion ul {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style: none;
  align-items: stretch;
  justify-items: stretch;
  margin: 0;
  padding-inline-start: 0px; /* Retain padding if needed */
}

.border-top {
  background: #969697;
  height: 1px;
  width: 100%;
}

#leader-accordion .open {
  cursor: pointer;
  display: block;
  text-decoration: none;
}
#leader-accordion a {
  color: #ffffff;
}
#leader-accordion img.leader-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire box without distortion */
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.667;
  transition: all 0.5s ease-in-out;
}
#leader-accordion .open-selected img.leader-photo,
#leader-accordion img.leader-photo:hover {
  opacity: 1;
}

.leader-content .leader-social {
  margin: 1em 0;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.leader-content h4 {
  font-family: "Franklin Gothic Demi Cond", sans-serif;
  font-size: 60px;
  font-style: normal;
  line-height: 1em;
  margin: 30px 0 15px;
  text-transform: uppercase;
}
.leader-content h4 span {
  background: #ffffff;
  color: #000000;
  display: inline-block;
  line-height: 1.2em;
  padding: 0 0.25em;
}
.leader-content h5 {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  line-height: 1.25em;
  float: left;
}
.leader-content .leader-social {
  margin: 1em 0;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 640px) {
  .leader-content h5 {
    margin-right: 2em;
  }
  .leader-content .leader-social {
    float: left;
    margin: 0;
    text-align: left;
    width: auto;
  }
}
.leader-content .leader-social a.social {
  display: inline-block;
  margin-right: 1em;
  vertical-align: middle;
  text-indent: -999999%;
}
.leader-content .leader-social a.social.website {
  width: 18px;
  height: 16px;
  background: transparent url("./asset/img/computer_retina.png") no-repeat
    center / 100% auto;
}
.leader-content .leader-social a.social.linkedin {
  width: 18px;
  height: 18px;
  background: transparent url("./asset/img/linkedIn_retina.png") no-repeat
    center / 100% auto;
}
.leader-content .leader-social a.social.twitter {
  width: 18px;
  height: 15px;
  background: transparent url("./asset/img/twitter_retina.png") no-repeat center /
    100% auto;
}
.leader-content .leader-social a.social.email {
  width: 18px;
  height: 15px;
  background: transparent url("./asset/img/email.png") no-repeat center / 100%
    auto;
}
.leader-content .leader-bio p {
  color: #b4b3b4;
  line-height: 34px;
}
.leader-content h5 {
  color: #fff !important;
  font-size: 17px;
  font-family: "FranklinGothic-Medium", sans-serif;
  font-style: normal;
  text-align: left;
}
.leader-bio {
  margin-top: 60px;
}
.leader-inner-wrapper h2 {
  color: #ffffff !important;
  font-size: 26px;
  font-family: "Franklin Gothic Demi", sans-serif;
  font-style: normal;
  text-align: left;
  line-height: 1em;
  margin: 20px 0 0 0;
}
.leader-inner-wrapper h3 {
  color: #969697 !important;
  font-size: 17px;
  font-family: "FranklinGothic-Medium", sans-serif;
  font-style: normal;
  text-align: left;
  line-height: 1.4;
  margin: 0;
}
.leader-inner-wrapper h2 {
  margin-bottom: 10px;
}
.leader-inner-wrapper h3 {
  margin-top: 0 !important;
}
.leader-content h4 {
  clear: left;
  display: none;
  float: left;
}

@media screen and (min-width: 640px) {
  .leader-content h4,
  .leader-content h5 {
    display: inline;
  }
}
.leader-content .leader-social a.social.email {
  margin-right: 0;
}
.leader-wrapper h1 {
  font-size: 60px;
  margin: 100px 0 100px 10px;
}
#leader-accordion li .leader-image {
  position: relative;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden; /* Ensure content doesn't overflow */
  width: 100%;
  aspect-ratio: 3 / 4; /* Maintain aspect ratio of images */
}
.open .info {
  color: white;
  position: absolute;
  right: 20px;
  bottom: 0px;
  z-index: 1000;
  text-indent: -99999%;
  border-radius: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  opacity: 0.5;
}
.open.open-selected .info,
.open:hover .info {
  opacity: 1;
}
#leader-accordion .open-selected .info span {
  background: #969697;
}
.open .info span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.open .info span:nth-child(1) {
  border-radius: 10px 0 0 10px;
  top: 0px;
  left: -7px;
  -webkit-transform: rotate(-125deg);
  -moz-transform: rotate(-125deg);
  -o-transform: rotate(-125deg);
  transform: rotate(-125deg);
}
.open .info span:nth-child(2) {
  border-radius: 0 10px 10px 0;
  top: 0px;
  left: 7px;
  -webkit-transform: rotate(125deg);
  -moz-transform: rotate(125deg);
  -o-transform: rotate(125deg);
  transform: rotate(125deg);
}
.open.open-selected .info span:nth-child(1) {
  border-radius: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 0;
}
.open.open-selected .info span:nth-child(2) {
  border-radius: 0;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  left: 0;
}

.section-our-people {
  background: #1f1f1f;
  margin-bottom: 100px;
}

.people-header {
  margin-bottom: 50px;
  color: #fff;
}

/* tab style */
@media screen and (max-width: 1024px) and (min-width: 690px) {
  #leader-accordion ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 690px) {
  #leader-accordion ul {
    grid-template-columns: 1fr;
  }
}

/** Blog Section **/
.blog-header {
  background-size: cover;
  background-position: center;
  color: white;
  margin-top: -70px;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.blog-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.blog-header-text {
  max-width: 100%;
  width: 100%;
  text-align: left;
  padding: 0 20px; /* Add some padding to the sides */
}

.blog-header-text h2 {
  font-size: 4.5vw; /* Use viewport width to make font size responsive */
  line-height: 1.1;
  margin-bottom: 20px;
}

.blog-header-text p {
  font-size: 2vw; /* Responsive font size */
  line-height: 1.5;
  margin-top: 20px;
}

.next-section {
  margin-top: 20px;
}

.scroll-down img {
  width: 50px; /* Adjust the size of the scroll icon */
  height: auto;
}

.search-filter-container .blog-search-title {
  text-align: left;
  font-size: 33px;
  line-height: 84px;
  color: #fff;
  padding-top: 30px;
}
.post-count {
  color: #fff;
  font-size: 21px;
}
.blog-main-search-container {
  margin-top: -78px;
  padding-top: 100px;
}
.search-blog-filter {
  max-width: 1200px;
  width: 100%;
}
.search-filter-container-with-back {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.search-filter-container-with-back h2 {
  color: #fff;
  font-size: 33px;
  margin-left: 10px;
}
.blog-search-form input[type="text"] {
  background-color: #1f1f1f;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  padding: 10px 0px;
  font-size: 33px;
  font-family: "Franklin Gothic Medium", sans-serif;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.blog-search-form input[type="text"]::placeholder {
  color: #fff;
}

.filter-year-select {
  width: 172px;
  height: 49px;
  padding: 10px;
  font-size: 17px;
  background: #1f1f1f;
  color: #fff;
}
.blog-search-form select {
  padding: 10px;
}

.blog-posts .post-thumbnail {
  width: 232px;
  height: 232px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
}
.blog-post {
  display: flex;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}
.blog-posts .post-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.blog-posts .default-thumb {
  max-width: 100px !important;
}

.post-content {
  flex: 1;
  padding: 20px 20px 20px 50px;
}
.post-content img {
  margin-left: 20px;
}
.post-meta {
  display: flex;
  gap: 10px;
  color: #bfbfbf;
  font-size: 12px;
  font-family: "Franklin Gothic Medium", sans-serif;
}
.post-meta .social-sharing a {
  font-size: 17px;
}
.post-date {
  display: block;
  margin-bottom: 10px;
}
.social-sharing {
  margin-top: -4px;
}
.social-sharing a {
  margin-left: 10px;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
}

.blog-main-container {
  background: #1f1f1f;
}
.post-title {
  font-size: 33px;
  line-height: 45px;
  margin: 20px 0;
  color: #fff;
}

.post-excerpt {
  margin-bottom: 10px;
  color: #fff;
}

.read-more {
  text-decoration: underline;
  color: #fff;
  font-size: 28px;
}
.read-more:hover {
  color: #bfbfbf;
}
.pagination {
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.pagination .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 15px;
  background: transparent;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
}
.pagination .page-numbers:hover {
  background: #1f1f1f;
  color: white;
}

.pagination .page-numbers.current {
  background: #1f1f1f;
  color: white;
}
.gradient-border {
  border: 1px solid transparent; /* Transparent border to allow gradient */
  border-image: linear-gradient(
      90deg,
      #6586ba 0%,
      #7376ac 6%,
      #9e4985 25%,
      #b92d6d 40%,
      #c32365 49%,
      #d5393b 100%
    )
    1;
  padding: 8px;
  color: white; /* Set the text color to white */
  border-radius: 5px;
  font-size: 16px;
  width: 120px;
  background: none; /* No background color */
  appearance: none; /* Removes default styling */
  -webkit-appearance: none; /* For Chrome, Safari */
  -moz-appearance: none; /* For Firefox */
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='white' d='M0 0l5 5 5-5H0z'/%3E%3C/svg%3E"); /* Custom down arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.gradient-border option {
  padding: 8px;
  color: black; /* Ensure options have a visible color */
}

/* Fix for IE to ensure the background size works properly */
select::-ms-expand {
  display: none;
}

.blog-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  margin-top: 20px;
}

.flex-video {
  position: relative;
  height: 0;
  padding-bottom: 75%;
  margin-bottom: 1rem;
  overflow: hidden;
}

.site-main-inner iframe,
.flex-content-template iframe,
.site-main-inner object,
.flex-content-template object,
.site-main-inner embed,
.flex-content-template embed,
.site-main-inner video .flex-content-template video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.single-post-page .content-area {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.entry-title {
  font-size: 38px;
  line-height: 46px;
  color: #fff;
}
.single-post-page .post-content {
  width: 70%;
  padding: 20px;
  color: #fff;
  border: 1px solid #5e5e5e;
}

.single-post--normal-title {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 80px;
  color: #fff;
  margin-bottom: 30px;
}
.single-post-page .post-meta {
  padding-top: 20px;
  font-size: 17px;
  color: #fff;
  font-family: "Franklin Gothic Medium", sans-serif;
}
.single-post-page .entry-meta {
  margin-bottom: 40px;
  font-size: 17px;
  font-family: "Franklin Gothic Medium", sans-serif;
}
.single-post-page .entry-meta a {
  color: #fff;
}
.single-post-page .entry-meta a:hover {
  color: #bfbfbf;
}
.single-post-page .entry-content {
  font-size: 17px;
  font-family: "Franklin Gothic Medium", sans-serif;
  color: #b4b3b4;
  line-height: 34px;
}
.single-post--normal-title h3 {
  font-size: 52px;
}
.single-post-page .sidebar-area {
  width: 28%;
  padding-left: 20px;
}

.single-post-page .search-box form {
  display: flex;
  justify-content: left;
  align-items: center;
}
.single-post-page .social-box {
  width: calc(232px - 20px);
  height: 96px;
  box-shadow: 7px 7px 4px #00000040;
  border: 1px solid #5e5e5e;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.single-post-page .search-box,
.single-post-page .social-box {
  margin-bottom: 20px;
}
.single-post-page .social-box {
  font-size: 18px;
}
.single-post-page .search-box h3,
.single-post-page .social-box h3 {
  color: white;
  margin-bottom: 15px;
}

.single-post-page .search-box input[type="text"] {
  color: white;
  width: calc(232px - 103px);
  height: 60px;
  background: #151515 0% 0% no-repeat padding-box;
  border: none;
  font-size: 16px;
  padding-left: 20px;
}
.single-post-page .search-box input[type="text"]::placeholder {
  color: white;
}
.single-post-page .search-box button {
  background: transparent
    linear-gradient(90deg, #c32365 0%, #c32365 37%, #d5393b 100%) 0% 0%
    no-repeat padding-box;
  width: 83px;
  height: 60px;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.single-post-page .social-box a {
  display: inline-block;
  margin-right: 10px;
}

.single-post-page .social-box img {
  width: 30px;
  height: 30px;
}

/* Navigation and Go Back Button */
.single-post-page .navigation-area {
  margin: 0 auto;
  width: 1200px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.single-post-page .nav-links .nav-title {
  font-size: 18px;
  color: white;
}

.single-post-page .go-back .back-button {
  display: inline-flex;
  align-items: top;
  font-size: 33px;
  margin-top: 10px;
  color: white;
  text-decoration: none;
}

.single-post-page .go-back .back-button img {
  margin-right: 20px;
}
.single-post-page {
  background-color: #141414;
  margin-top: -70px;
}
img {
  max-width: 100%;
  height: auto;
}

.site-main {
  background-color: #1f1f1f;
  color: #fff;
  margin-top: -78px;
  padding-top: 150px;
}
.site-main p,
.site-main li {
  color: #b4b3b4;
  font-family: "FranklinGothic-Medium", sans-serif;
  font-size: 17px;
  line-height: 34px;
}
.site-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.site-main-inner-small {
  max-width: 800px;
}

.site-main p strong {
  color: #ffffff;
  font-family: "Franklin Gothic Demi Cond", sans-serif;
  font-style: normal;
  font-weight: normal;
  text-transform: uppercase;
}
.site-main h1 {
  color: #fff;
}
.market-content-area {
  background-color: #1f1f1f;
  color: #fff;
}
.market-page-content {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 10px;
}
.market-page-content h1 {
  color: #fff;
  font-size: 54px;
  line-height: 64px;
  margin-bottom: 40px;
}
.market-page-content p {
  font-size: 17px;
  line-height: 34px;
  padding-bottom: 20px;
  color: #b4b3b4;
}
.ppw-ppf-input-container {
  padding-top: 50px;
}
.ppw-pwd-label input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.4375rem;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: #0a0a0a;
  background-color: #fefefe;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  border-radius: 3px;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.ppw-pwd-submit-btn {
  padding: 0.5rem 1rem;
  font-family: "Franklin Gothic Medium", sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.page-market-hero .full-height-hero-image-with-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
  z-index: 1;
}

/** Flite page **/

.mb-fullheight {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  z-index: 1;
}
.mb-fullheight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Adjust the opacity and color as needed */
  z-index: -1;
}

.flite-logo {
  display: block;
  max-width: 200px;
  width: 100%;
}

.flite-page .content-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  padding: 20px;
}

.flite-page .grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.flite-page .grid-item {
  padding: 20px;
  color: white;
  border-radius: 10px;
  transition: transform 0.3s ease;
  text-align: center;
}

.flite-page .grid-item p {
  font-size: 22px;
  font-family: "FranklinGothic URW", sans-serif;
  color: #fff;
  margin-top: 10px;
}

.flite-page .grid-item:hover {
  transform: translateY(-5px);
}

.flite-page .mb-button {
  margin-top: 15px;
}

.flite-page .message-text-bottom {
  margin-top: 30px;
  font-size: 14px;
  color: #ddd;
}

.flite-page .entry-content.minimal-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flite-page .grid-content {
  position: relative;
  margin-bottom: 50px;
}

.category-page {
  padding: 100px 0;
}
.category-page .blog-header-text {
  top: 0;
}

@media (max-width: 768px) {
  .flite-page .grid-layout {
    grid-template-columns: 1fr;
  }
}

.post-content h5 {
  font-size: 13px;
  font-family: "FranklinGothic-Medium", sans-serif;
  color: #fff;
  margin-top: 0px;
  margin-bottom: 5px;
}

/** Mobile style adjust **/
/** Desktop to Small Desktop **/
@media screen and (min-width: 1025px) and (max-width: 1240px) {
  .container-header {
    padding-left: 20px;
  }
}
.error-404 {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}
.error-404 .page-header {
  padding-top: 100px;
  color: #fff;
}
.error-404 .page-header h1 {
  color: #fff;
}
.error-404 .page-content {
  margin-bottom: 100px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
  border: 1px solid #ddd; /* Border around the table */
}

th,
td {
  padding: 12px 15px;
  border: 1px solid #ddd; /* Border around table cells */
}

thead {
  background-color: #141414;
}

th {
  background-color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
}

.blog-posts p {
  padding-top: 100px;
  padding-bottom: 100px;
  color: #fff;
}

.blog-post-with-thumbnail .post-thumbnail img {
  width: 100%;
  height: auto;
  margin-right: 0;
}

.blog-post-with-thumbnail .post-thumbnail {
  height: auto;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Fully transparent */
  z-index: 1; /* Above the video */
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 0; /* Below the overlay */
}

/* General Tablet Styles */
@media screen and (max-width: 1024px) and (min-width: 690px) {
  /* General tablet styles */
  .container-header .main-nav {
    display: none;
  }
  .sidebar-menu {
    display: block;
  }
  .leader-content .leader-social {
    display: flex;
    padding-top: 15px;
  }
  .swiper-pagination {
    right: 17px !important;
  }
  .container-header .logo {
    display: flex;
    align-items: center;
    height: 61px;
  }
  .container-header {
    padding-left: 20px;
  }
}

/* Specific Styles for Smaller Tablets */
@media screen and (min-width: 691px) and (max-width: 768px) {
  /* Specific styles for smaller tablets within this range */
  .container-header .main-nav {
    display: none;
  }
  .mb-brand {
    height: 347px; /* Further reduce height on mobile */
  }
  .leader-content .leader-social {
    display: flex;
    padding-top: 15px;
  }
  .swiper-pagination {
    right: 17px !important;
  }
  .sidebar-menu {
    display: block;
  }
  .container-header .logo {
    display: flex;
    align-items: center;
    height: 61px;
  }
  .container-header {
    padding-left: 20px;
  }
  .blog-header-text h2 {
    font-size: 54px;
    line-height: 64px;
  }
}

/*High resulution Mobile up to */
@media screen and (min-width: 480px) and (max-width: 690px) {
  .container-header .main-nav {
    display: none;
  }
  .mb-brand {
    height: 310px; /* Further reduce height on mobile */
  }
  .leader-content .leader-social {
    display: flex;
    padding-top: 15px;
  }
  .swiper-pagination {
    right: 17px !important;
  }
  .sidebar-menu {
    display: block;
  }
  .container-header .logo {
    display: flex;
    align-items: center;
    height: 61px;
  }
  .swiper-container .slider-hero-content--inner,
  .hero-content-inner {
    width: 80%;
  }
  .swiper-container .slider-hero-content--inner h1,
  .hero-title {
    font-size: 54px;
    line-height: 64px;
    font-weight: normal;
  }
  .footer-menu li {
    display: block;
    text-align: left;
    line-height: 1.8em;
  }
  h1 {
    font-size: 54px;
    line-height: 64px;
  }
  .contact-us h2 {
    font-size: 54px;
    line-height: 64px;
  }
  .category-page .blog-header-text h2,
  .blog-header-text h2 {
    font-size: 54px;
    line-height: 64px;
  }
  .container-header {
    padding-left: 20px;
  }
  .blog-header-text {
    width: auto;
  }
  .blog-header-text {
    width: auto;
  }
  .blog-post {
    flex-direction: column;
  }
  .post-content {
    padding: 20px 0 20px 0;
  }
  .single-post-page .content-area {
    flex-direction: column-reverse;
  }
  .single-post-page .post-content {
    width: auto;
  }
  .single-post-page .sidebar-area {
    padding-left: 0px;
    width: 100%;
  }
  .single-post--normal-title {
    padding-top: 0px;
  }
  .single-post-page .social-box {
    width: auto;
  }
  .single-post-page .search-box input[type="text"] {
    width: 70%;
  }
  .single-post-page .search-box button {
    width: 30%;
  }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
  .category-page .blog-header-text h2 {
    font-size: 40px;
    line-height: 54px;
  }
  .mb-brand {
    height: 177px; /* Further reduce height on mobile */
  }
  .leader-content .leader-social {
    display: flex;
    padding-top: 15px;
  }
  .swiper-pagination {
    right: 17px !important;
  }
  .sidebar-menu {
    display: block;
  }
  .container-header {
    padding-left: 20px;
  }
  .container-header .main-nav {
    display: none;
  }
  .container-header .logo {
    display: flex;
    align-items: center;
    height: 61px;
  }
  .swiper-container .slider-hero-content--inner,
  .hero-content-inner {
    width: 80%;
  }
  .swiper-container .slider-hero-content--inner h1,
  .hero-title {
    font-size: 40px;
    line-height: 54px;
    font-weight: normal;
  }
  .footer-menu li {
    display: block;
    text-align: left;
    line-height: 1.8em;
  }
  h1 {
    font-size: 40px;
    line-height: 54px;
  }
  .contact-us h2,
  .blog-header-text h2 {
    font-size: 40px;
    line-height: 54px;
  }
  .blog-header-text {
    width: auto;
  }
  .blog-post {
    flex-direction: column;
  }
  .post-content {
    padding: 20px 0 20px 0;
  }
  .single-post-page .content-area {
    flex-direction: column-reverse;
  }
  .single-post-page .post-content {
    width: auto;
  }
  .single-post-page .sidebar-area {
    padding-left: 0px;
    width: 100%;
  }
  .single-post--normal-title {
    padding-top: 0px;
  }

  .single-post-page .social-box {
    width: auto;
  }
  .single-post-page .search-box input[type="text"] {
    width: 70%;
  }
  .single-post-page .search-box button {
    width: 30%;
  }
}

.go-back-button {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  position: relative;
  background-color: transparent;
}

.go-back-button .arrow-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  margin-right: 10px;
  font-size: 20px;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: transparent;
}

.go-back-button .arrow-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.1px; /* Padding for the gradient border */
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #6586ba 0%,
    #7376ac 6%,
    #9e4985 25%,
    #b92d6d 40%,
    #c32365 49%,
    #d5393b 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  transition: all 0.3s ease;
}

.go-back-button:hover .arrow-icon {
  background: linear-gradient(
    90deg,
    #6586ba 0%,
    #7376ac 6%,
    #9e4985 25%,
    #b92d6d 40%,
    #c32365 49%,
    #d5393b 100%
  );
  color: white;
}

.go-back-button:hover .arrow-icon::before {
  background: none; /* Remove the border effect on hover */
}

.leader-inner-wrapper h2:not(:root:root) {
  font-weight: 600;
}