:root {
  --white: #ffffff;
  --black: #000000;
  --neroColor: #222222;
  --whiteSmokeColor: #f5f5f5;
  --whiteSmoke1: #f0efef;
  --neroColor1: #262626;
  --eclipseColor: #3b3b3b;
  --silverColor: #c2c2c2;
  --nightRiderColor: #2b2b2b;
  --neroColor2: #191919;
  --neroColor3: #1f1f1f;
  --whisperColor: #eaeaea;
  --blackRussianColor: #202124;
  --whisperColor1: #eeeeee;
  --matterhornColor: #4d4d4d;
  --whiteSmokeColor1: #f1f1f1;
}

body {
  font-family: "SF Pro", -apple-system, sans-serif !important;
  font-weight: 300;
  font-size: 16px;
  color: #222222;
  line-height: 1.4;
  -webkit-overflow-scrolling: touch;
  background-color: #f5f5f5;
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

a,
a:hover {
  outline: none;
  font-weight: 500;
}

a:hover {
  text-decoration: none;
}
::-webkit-scrollbar {
  display: none;
}
ul {
  margin-bottom: 0;
  list-style: none;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb44 {
  margin-bottom: 44px;
}
.mb64 {
  margin-bottom: 64px;
}
.overflow-hidden {
  overflow: hidden;
}
/* .overflow-visible {
  overflow: visible;
} */
/*** Font Family ***/

@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro.otf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Thin.otf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Light.otf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Medium.otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Semibold.otf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Bold.otf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Heavy.otf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro";
  font-display: swap;
  src: url("../fonts/SF-Pro-Black.otf");
  font-weight: 900;
  font-style: normal;
}
/* Intro Section */
.namaskaramIntro {
  position: fixed;
  inset: 0;
  /* top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
  background: #121212;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s ease;
}

.introSection {
  display: flex;
  flex-direction: column;
}
.introTitle {
  font-family: "Poppins";
  font-size: 72px;
  color: var(--white);
  font-weight: 700;
  line-height: 1.3;
  transform: translateY(-150%);
  opacity: 0;
  filter: blur(10px);
  transition: all 1s ease;
}
.namaskaramIntro.show .introTitle {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
.namaskaramIntro.hidden {
  transform: translateY(-100%);
  opacity: 1;
  pointer-events: none;
}
.namaskaramIntro.hide {
  display: none;
}
.introTitle.reveal {
  transform: translateY(100%) !important;
  filter: blur(10px) !important;
  opacity: 0 !important;
}
.introWelcome {
  display: flex;
  font-family: "Poppins";
  font-size: 20px;
  color: var(--white);
  font-weight: 500;
  line-height: 1.3;
  transform: translateY(-720%);
  opacity: 0;
  filter: blur(10px);
  transition: all 1s ease;
}
.namaskaramIntro.show .introWelcome {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
.introWelcome.reveal {
  transform: translateY(100%) !important;
  filter: blur(10px) !important;
  opacity: 0 !important;
}
.introImage {
  margin-left: 12px;
}
.introImage img {
  height: 36px;
}

/*** header style ***/
.container {
  max-width: 1154px;
}
.topSection {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 100vh;
}
header {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.headerRow {
  /* max-width: 1154px; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 46px 200px;
  margin: 0 auto;
}
.logoArea {
  background: rgba(202, 202, 202, 0.5);
  padding: 10px 27px;
  height: 50px;
  border-radius: 99px;
  cursor: pointer;
}
.logoArea img {
  height: 29px;
}
.mainLogo {
  display: block;
}
.hoverLogo {
  display: none;
}
.logoArea:hover {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
}
.logoArea:hover .mainLogo {
  display: none;
}
.logoArea:hover .hoverLogo {
  display: block;
}

.rightSection {
  display: flex;
}
.btnResume {
  width: 138px;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  border-radius: 99px;
  padding: 10px 29px 10px 19px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
  text-decoration: none;
}

.btnResume .btnText {
  position: relative;
  z-index: 5;
}

.btnResume .btnArrowIcon {
  width: 10px;
  height: 11px;
  position: relative;
  z-index: 5;
  margin-right: 17px;
  transform: scale(1);
  transition: transform 0.3s ease-in;
}

.btnResume .btnDownloadIcon {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 5;
  margin-left: 25px;
  visibility: hidden;
  opacity: 0;
  display: none;
}

.btnResume .btnDownloadIcon svg {
  transform: translateX(-130px) rotate(-90deg);
  transition: transform 0.5s ease-in;
}

.btnResume::before {
  content: "";
  background: var(--black);
  width: 28px;
  height: 28px;
  display: block;
  position: absolute;
  z-index: 1;
  border-radius: 99px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.btnResume:hover {
  color: var(--white);
  font-weight: 600;
  padding: 15px 16px 15px 17px;
}

.btnResume:hover .btnArrowIcon {
  margin-right: 0;
  transform: scale(0);
}

.btnResume:hover .btnDownloadIcon {
  visibility: visible;
  opacity: 1;
  display: flex;
}

.btnResume:hover .btnDownloadIcon svg {
  transform: translateX(0) rotate(0deg);
  animation: arrowAnimation 0.4s ease-in;
}

.btnResume:hover::before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
}
.menuInfo {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-right: 10px;
}
.menuInfo img {
  width: 17px;
  height: 10px;
}
/*** end header style ***/

/*** style ***/
.dotBgInfo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/dot-bg.svg) repeat;
  z-index: -1;
}
.aboutBg {
  height: 100vh;
}

.userSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  width: 100%;
  padding: 48px 0;
}
.userContainer {
  max-width: 1069px;
  margin: 0 auto;
}
.wrapperContainer {
  max-width: 808px;
  margin: 0 auto;
}
.userInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}
.userPic {
  width: 213px;
  height: 213px;
  position: relative;
  border-radius: 200px;
  overflow: hidden;
}
.userPic:hover .hoverUserPic {
  opacity: 1;
  visibility: visible;
}
.hoverUserPic {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.85);
  transition: all 0.3s ease-in-out;
}
.hoverUserPic:hover {
  color: var(--white);
  font-weight: 700;
}
.userName {
  font-family: "Poppins";
  font-size: 48px;
  color: var(--neroColor);
  font-weight: 700;
  line-height: 1;
  margin-top: 24px;
}
.userExpDetails {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 14px;
}
.userExp {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--neroColor);
  font-weight: 500;
  line-height: 1;
  background: rgba(255, 255, 255, 0.61);
  border-radius: 40px;
  padding: 6px 14px;
  border: 1px solid var(--silverColor);
}
.userExp img {
  width: 24px;
  margin-right: 12px;
}
.userExpDesign {
  display: none;
}
.userPosition {
  display: flex;
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    rgba(191, 242, 190, 1),
    rgba(40, 184, 37, 1),
    rgba(191, 242, 190, 1),
    rgba(40, 184, 37, 1)
  );
  background-size: 400%;
  animation: gradientAnimation 5s ease infinite;
  padding: 1px;
}

.userPositionBox {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #03ae03;
  font-weight: 600;
  line-height: 1;
  background: #d0f6cd;
  border-radius: 40px;
  padding: 7px 15px;
}

.userPosition .greenDot {
  width: 8px;
  height: 8px;
  background: #30c520;
  border-radius: 10px;
  margin-right: 12px;
}
.userSummery {
  width: 70%;
  font-size: 14px;
  color: var(--nightRiderColor);
  line-height: 1.6;
  margin-top: 21px;
  text-align: center;
}

/* side menu */
.hamBurgerMenu {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  height: 100vh;
  cursor: pointer;
  background: var(--white);
  transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transform: translateY(-100%);
  z-index: 9999;
}
.hamBurgerMenuSection {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: auto;
}
.hamBurgerMenu.show {
  transform: translateY(0);
}

.hamBurgerMenu.show .hamBurgerMenuSection .menuHeader,
.hamBurgerMenu.show .hamBurgerMenuSection .menuLinkData,
.hamBurgerMenu.show .hamBurgerMenuSection .menuBottomDetails {
  transition-delay: 0.5s;
  opacity: 1;
  visibility: visible;
}

.aboveAll {
  z-index: 1000;
  position: relative;
}

.menuTopSection {
  padding: 22px 24px 32px 24px;
  background: linear-gradient(
    180deg,
    var(--neroColor2) 0%,
    var(--neroColor2) 75.81%,
    #292929 100%
  );
}
.menuHeader {
  width: 100%;
  height: 81px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  background: var(--neroColor2);
}
.menuHeader.headerSticky {
  position: sticky;
  top: 0;
}
.menuLogo {
  width: 81px;
}
.menuCloseInfo {
  width: 44px;
}
.menuLinkData {
  display: flex;
  flex-direction: column;
  flex: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  margin-top: 26px;
}
.menuLinkList {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.menuLinkList li:not(:last-child) {
  margin-bottom: 16px;
}
.menuLinkList a {
  display: flex;
  justify-content: space-between;
  height: 33px;
  font-size: 16px;
  color: var(--white);
  font-weight: 700;
  line-height: 2;
  text-decoration: none;
}
.menuLinkList a svg {
  width: 17px;
}
.linkArrow {
  width: 12px;
}
.commingText {
  font-size: 14px;
  color: #8b8b8b;
  font-weight: 500;
}
.menuBottomSection {
  padding: 24px;
  flex: 1;
}
.menuBottomDetails {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.menuBottomDetails .userSummaryAward {
  flex: 1;
  margin: 0 -24px 24px;
  width: calc(100% + 48px);
}
.menuUserSummaryExpData {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--whisperColor1);
}
.menuLetSection {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}
.menuLetCraftText {
  font-size: 14px;
  color: var(--black);
  line-height: 1.3;
  font-weight: 900;
}
.menuLetBtnInfo {
  display: flex;
}
.menuLetConnectBtn {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
  padding: 0 24px;
  border-radius: 70px;
  white-space: nowrap;
  background: linear-gradient(90deg, #171717 0%, #3f3f3f 100%);
  text-decoration: none;
}

.menuLetConnectBtn:hover {
  color: var(--white);
  opacity: 0.8;
}
/* work styling */
.workCompanyInfo {
  width: 100%;
  /* padding: 72px 0 0; */
  padding: 56px 0 0;
  overflow: hidden;
}
.workCompList {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 82px; */
}
.workCompListItem {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 62px;
  filter: grayscale(100%);
  opacity: 0.5;
  transform: scale(1);
  transition: transform 0.3s ease-in, filter 0.5s ease;
  padding: 0 24px;
}
.workCompListItem:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.2);
}
.workCompListItem img {
  max-width: 90%;
  max-height: 90%;
}
.workCompList .slick-track {
  display: flex;
  align-items: center;
}
/* .workCompList .slick-slide {
  border: 1px solid green;
} */
/* .workCompList .slick-slide div {
  display: flex;
  align-items: center;
} */

/* Tab Styling */

.featureTabSection {
  display: flex;
  flex-direction: column;
  padding: 26px 0 32px;
}
.tabBarInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--whisperColor);
  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.06);
}
.navTabBar {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.navTabBar button {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 80px;
  background: var(--white);
  cursor: pointer;
  /* transition: all 0.5s ease-in; */
}
.navTabBar button .mobileTab {
  display: none;
}
.navTabBar button:hover {
  font-size: 16px;
  color: var(--black);
  background: var(--whiteSmokeColor1);
}
.navTabBar button.active-button {
  font-size: 16px;
  color: var(--white);
  background: var(--neroColor3);
}

.tabRightBar {
  display: flex;
  align-items: center;
  height: 39px;
  border-left: 1px solid var(--whisperColor);
  padding-left: 16px;
}
.designBtn {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 14px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 80px;
}
.designBtn svg {
  width: 10px;
  height: 9px;
  margin-left: 8px;
  display: none;
}
.designBtn:hover {
  font-size: 16px;
  color: var(--black);
  background: var(--whiteSmokeColor1);
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  animation: opacityAnimation 0.7s ease-in;
}
.tabContentSection {
  width: 100%;
  margin-top: 24px;
}
.tabContentDetails {
  position: relative;
}
/* */
.userFixedSection {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0 auto;
  display: flex;
  opacity: 0;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  max-width: 720px;
  gap: 20px;
  /* background: var(--white); */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 80px;
  padding: 6px 9px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transform: translateY(150%);
}
.showFixed {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%);
}
.userFixedLeft {
  display: flex;
  flex: 1;
  gap: 21px;
}
.userFixedRight {
  display: flex;
  gap: 19px;
}
.userFixedPicInfo {
  width: 53px;
  height: 53px;
}
.userFixedPicInfo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.userFixedDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
}
.userFixedName {
  font-size: 18px;
  color: var(--blackRussianColor);
  font-weight: 700;
  line-height: 1;
}
.userFixedWork {
  display: flex;
  align-content: center;
  gap: 8px;
  font-size: 13px;
  color: #878787;
  font-weight: 400;
  line-height: 1;
  padding-top: 4px;
}
.userFixedWork span {
  display: flex;
}
.userFixedActiveDot {
  width: 14px;
  height: 14px;
  position: relative;
}
.userFixedActiveDot::before,
.userFixedActiveDot::after {
  content: "";
  position: absolute;
  border-radius: 20px;
}
.userFixedActiveDot::before {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 14px;
  height: 14px;
  background: #d6ffdb;
  animation: pulseOut 2s ease-out infinite;
}
.userFixedActiveDot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #18bf2b;
  transform: translate(-50%, -50%);
}

@keyframes pulseOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.btnWhy {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 14px;
  color: var(--black);
  font-weight: 700;
  line-height: 1;
  padding: 0 22px;
  border-radius: 70px;
  background: var(--white);
  border: 1px solid #e2e2e2;
  text-decoration: none;
}
.btnWhy:hover {
  color: var(--black);
  background: #f1f1f1;
}
.btnBook {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  padding: 0 16px 0 20px;
  border-radius: 70px;
  background: var(--neroColor3);
  text-decoration: none;
  box-shadow: 0px 2px 16px 1px rgba(0, 0, 0, 0.48);
}
.btnBook img {
  width: 13px;
  margin-left: 14px;
}
.btnBook:hover {
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  background: var(--black);
}
/* */
.contentItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #f5f5f5;
  border-radius: 32px;
  margin-bottom: 40px;
  border: 1px solid #dddddd;
  box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  cursor: pointer;
}
.contentItem:hover .viewBtn {
  color: var(--white);
  background: var(--neroColor3);
}
.contentItem:hover .comingBtn {
  color: var(--white);
  opacity: 0.8;
}
.contentItemData {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 24px 32px;
}

.contentItemDataTopRow {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.contentItemLeftData {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.headingItem {
  font-size: 21px;
  color: var(--neroColor1);
  font-weight: 900;
  line-height: 1.2;
  padding: 4px 0;
}
.subItem {
  font-size: 14px;
  color: var(--neroColor1);
  font-weight: 400;
  line-height: 1.6;
}
.conversionItemSection {
  display: flex;
  gap: 30px;
  border-top: 1px solid #e7e7e7;
  padding: 16px 0 0;
}
.conversionItemList {
  display: flex;
  align-items: center;
  gap: 4px;
}
.conversionRate {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--neroColor1);
  font-weight: 800;
  line-height: 1;
  gap: 4px;
}

.conversionRate svg {
  width: 14px;
}
.conversionHandIcon svg {
  width: 18px;
}
.conversionRateText {
  font-size: 14px;
  color: var(--neroColor1);
  font-weight: 400;
  line-height: 1;
}
.contentItemButton {
  display: flex;
}
.viewBtn {
  display: flex;
  align-items: center;
  height: 33px;
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
  padding: 0 12px;
  border-radius: 70px;
  background: var(--eclipseColor);
  text-decoration: none;
  gap: 10px;
}
.viewBtn svg {
  width: 9px;
}
.viewBtn:hover {
  color: var(--white);
  background: var(--neroColor3);
}
.mobileView {
  display: none !important;
}
.comingBtn {
  display: flex;
  align-items: center;
  height: 33px;
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
  padding: 0 12px;
  border-radius: 70px;
  background: #bebebe;
  text-decoration: none;
  white-space: nowrap;
}
.comingBtn:hover {
  color: var(--white);
  opacity: 0.8;
}
/* .contentItemComingText {
  font-size: 20px;
  color: var(--white);
  font-weight: 600;
  line-height: 1;
} */
.contentItemImg {
  display: flex;
  width: 100%;
  background: #4f4f4f;
  /* filter: grayscale(100%);
  opacity: 0.7; */
}
.contentItemImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* */
.graydientContainer {
  width: 100%;
  background: linear-gradient(180deg, #e9e9e9 0%, #f1f1f1 100%);
  overflow: hidden;
}
.recommendWrapper {
  width: 100%;
  padding: 64px 0 80px;
}
.recommendTitle {
  font-size: 36px;
  color: var(--neroColor1);
  font-weight: 900;
  line-height: 1;
}
.recommendSlider {
  position: relative;
  margin-top: 48px;
}
.recommendSliderVariable {
  display: flex;
}
.recommendSliderVariable .slick-track {
  padding-left: 30px;
}
.recommendSliderVariable .slick-slide {
  padding-right: 32px;
}
.recommendSliderVariable .slick-prev {
  top: -66px;
  left: inherit !important;
  right: 27%;
  width: 39px;
  height: 39px;
  border-radius: 60px;
  background: var(--neroColor1);
}
.recommendSliderVariable .slick-prev::before {
  content: "";
  display: flex;
  margin-left: 14px;
  width: 9px;
  height: 15px;
  opacity: 1;
  background: url(../images/arrow-left.png) no-repeat;
  background-size: cover;
}
.recommendSliderVariable .slick-next {
  top: -66px;
  right: 23%;
  width: 39px;
  height: 39px;
  border-radius: 60px;
  background: var(--neroColor1);
}
.recommendSliderVariable .slick-next::before {
  content: "";
  display: flex;
  margin-left: 16px;
  width: 9px;
  height: 15px;
  opacity: 1;
  background: url(../images/arrow-right.png) no-repeat;
  background-size: cover;
}
.recommendSliderVariable .slick-prev.slick-disabled,
.recommendSliderVariable .slick-next.slick-disabled {
  background: #8e8e8e;
}
.recommendSliderVariable .slick-prev.slick-disabled::before,
.recommendSliderVariable .slick-next.slick-disabled::before {
  opacity: 1;
}
.recommendSliderItem {
  width: 624px;
  background: var(--neroColor1);
  padding: 32px 24px 28px;
  border-radius: 32px;
}
.recommendSliderItemData {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.recommendItemHeading {
  min-height: 58px;
  font-size: 24px;
  color: var(--white);
  font-weight: 800;
  line-height: 1.2;
}
.recommendItemDetails {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 320px;
  padding-top: 24px;
  overflow: hidden;
  overflow-y: scroll;
}
.recommendItemDetails p {
  font-size: 14px;
  color: var(--white);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 30px;
}
.recommendItemDetails p:last-child {
  margin-bottom: 0;
}
.recommendItemUserData {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #3a3a3a;
  margin-top: 20px;
  padding-top: 20px;
}
.recUserLeftData {
  display: flex;
  flex: 1;
  gap: 16px;
  padding-right: 10px;
}
.recUserPic {
  width: 65px;
  height: 65px;
}
.recUserPic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recUserDetalis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.recUserName {
  font-size: 16px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
}
.recUserName a {
  font-size: 16px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.recUserName a:hover {
  color: var(--white);
  text-decoration: none;
}
.recUserdesignation {
  font-size: 14px;
  color: #aeadad;
  font-weight: 500;
  line-height: 1;
  padding-top: 4px;
}
.recUserRightData {
  display: flex;
  align-items: center;
  /* filter: grayscale(100%);
  opacity: 0.7; */
}
.recUserRightData img {
  height: 64px;
}

/* */
.userSummaryWrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.userSummarySection {
  background: var(--white);
  border: 1px solid #dddddd;
  border-radius: 32px;
  padding: 40px;
  margin-bottom: 70px;
  overflow: hidden;
}
.userSummaryTitle {
  font-size: 36px;
  color: var(--blackRussianColor);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 14px;
}
.userSummarySection p {
  font-size: 14px;
  color: #5f6369;
  font-weight: 300;
  line-height: 2;
  margin: 0;
}
.userSummarySection p:not(:last-child) {
  margin-bottom: 30px;
}
.userSummaryDetails {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 21px;
  margin-top: 16px;
  border-top: 1px solid var(--whisperColor1);
  padding-top: 16px;
}
.userSummLeft {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 21px;
}
.userSummPic {
  width: 79px;
  height: 79px;
}
.userSummPic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.userSummName {
  font-size: 18px;
  color: var(--blackRussianColor);
  font-weight: 700;
  line-height: 1;
}
.userSummCity {
  font-size: 14px;
  color: #878787;
  font-weight: 400;
  line-height: 1;
  padding-top: 2px;
}
.userSummRight {
  display: flex;
  align-items: center;
  gap: 16px;
}
.aboutBtn {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 14px;
  color: var(--black);
  font-weight: 700;
  line-height: 1;
  padding: 0 20px;
  border-radius: 70px;
  background: var(--white);
  border: 1px solid #e2e2e2;
  text-decoration: none;
}
.aboutBtn:hover {
  color: var(--black);
  background: #f1f1f1;
}
.bookBtn {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  padding: 0 16px 0 24px;
  border-radius: 70px;
  background: var(--neroColor3);
  text-decoration: none;
}
.bookBtn img {
  width: 13px;
  margin-left: 14px;
}
.bookBtn:hover {
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  background: var(--black);
}
.userSummaryExp {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 56px;
  margin-top: 16px;
  border-top: 1px solid var(--whisperColor1);
  padding-top: 16px;
}
/* .userSummaryExpItem {
  width: 100%;
} */
.userSummaryExpHeading {
  font-size: 11px;
  color: #5f6369;
  font-weight: 300;
  line-height: 1;
}
.userSummaryExpTitle {
  font-size: 14px;
  color: var(--blackRussianColor);
  font-weight: 700;
  line-height: 1;
  padding-top: 4px;
}
.userSummaryAward {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 32px;
  position: relative;

  margin-top: 20px;
}
.userSummaryAward:hover .userAwardLeft {
  left: -56px;
  bottom: -44px;
  opacity: 1;
}
.userSummaryAward:hover .userAwardRight {
  right: -42px;
  bottom: -45px;
  opacity: 1;
}
.userSummaryAward:hover .userAwardLeft img {
  width: 90%;
}
.userSummaryAward:hover .userAwardRight img {
  width: 90%;
}
.userSummaryAwardList {
  display: flex;
  width: 100%;
}
.userSummaryAwardListData {
  display: flex;
  width: 100%;
  gap: 19px;
}
.userSummaryAwardItem {
  display: flex;
}
.userAwardLeft {
  position: absolute;
  left: -100px;
  bottom: -140px;
  width: 82px;
  opacity: 0;
  transition: all 0.3s ease-in;
}
.userAwardRight {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 66px;
  opacity: 0;
  transition: all 0.3s ease-in;
}
.awardLeftImage {
  position: absolute;
  left: -190px;
  bottom: 113px;
  width: 195px;
  opacity: 0;
  transform: rotate(-6deg);
  transition: all 0.5s ease-in;
}
.awardLeftImage img {
  width: 100%;
}
.awardLeftImage.show {
  left: -10px;
  bottom: 234px;
  opacity: 1;
}
.awardRightImage {
  position: absolute;
  right: -200px;
  bottom: 136px;
  width: 141px;
  opacity: 0;
  transition: all 0.5s ease-in;
}
.awardRightImage img {
  width: 100%;
}
.awardRightImage.show {
  right: 0;
  bottom: 236px;
  opacity: 1;
}
/*  */
.breakingWrapper {
  width: 100%;
  padding: 0 0 106px;
}
/* How Design Menu Styling*/
.breakingSection {
  background: var(--neroColor1);
  border-radius: 32px;
  padding: 48px 40px;
  overflow: hidden;
}
.breakingTitle {
  font-size: 35px;
  color: #fff;
  font-weight: 900;
  line-height: 1.1;
  padding-bottom: 20px;
  border-bottom: 1px solid #2c2c2c;
}
.breakingTabSection {
  margin-top: 20px;
}
.breakingTabHeader {
  width: 100%;
  display: flex;
}
.breakingTabHeader .navTabBar {
  gap: 0;
}
.breakingTabHeader .navTabBar button {
  width: 90px;
  height: auto;
  font-size: 14px;
  color: #8e8e8e;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  background: var(--neroColor1);
  border-bottom: none;
}
.breakingTabHeader .navTabBar button:hover,
.breakingTabHeader .navTabBar button.active-button {
  font-weight: 600;
  color: var(--white);
}
.breakingTabDetails {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.contentShowDetails {
  width: 100%;
  display: flex;
}
.contentAccordion {
  width: 100%;
  padding-bottom: 4px;
}
.contentAccordion .accordion-item {
  border: none;
  background: transparent;
  margin-bottom: 16px;
}
.contentAccordion .accordion-button {
  font-size: 14px;
  color: var(--white);
  font-weight: 400;
  padding: 12px 42px 12px 12px;
  background: var(--neroColor1);
  position: relative;
}
.contentAccordion .accordion-button::after {
  width: 16px;
  height: 16px;
  background: url(../images/white-plus.svg) no-repeat;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(0deg);
  z-index: 99;
}
.contentAccordion .accordion-button:not(.collapsed) {
  box-shadow: none;
  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.06);
  background: rgba(49, 49, 49, 1);
  border-radius: 8px 8px 0 0;
}
.contentAccordion .accordion-button:not(.collapsed)::after {
  transform: translateY(-50%) rotate(45deg);
}
.contentAccordion .accordion-button:focus {
  box-shadow: none;
}
.contentAccordion .accordion-body {
  font-size: 14px;
  color: var(--white);
  font-weight: 400;
  line-height: 1.6;
  background: transparent;
  padding: 8px 40px 12px 12px;
  background: rgba(49, 49, 49, 1);
  border-radius: 0 0 8px 8px;
}
.contentShowBottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #2c2c2c;
}
.contentShowBottomLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px;
}
.contentBottomTitle {
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}
.contentBottomData {
  font-size: 12px;
  color: var(--white);
  font-weight: 400;
  line-height: 1;
  padding-top: 4px;
}
.contentShowBottomRight {
  display: flex;
}
.connectBtn {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 14px;
  color: var(--black);
  font-weight: 700;
  line-height: 1;
  background: var(--white);
  padding: 0 20px;
  border-radius: 70px;
  text-decoration: none;
  cursor: pointer;
}
.connectBtn:hover {
  color: var(--white);
  background: rgba(149, 149, 149, 0.6);
}
.footerSection {
  background: #161616;
  padding: 20px 0 17px;
}
.footerInfo {
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
}
.footerCopyText {
  font-size: 14px;
  color: var(--white);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.footerCopyText a {
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.footerCopyText a:hover {
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
}
.footerSocialLink {
  display: flex;
  gap: 32px;
}
.footerSocialLink a {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.footerSocialLink a svg {
  width: 9px;
  height: 9px;
  margin-left: 8px;
}
.footerSocialLink a:hover {
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
}
.designMenuSection {
  position: fixed;
  top: 0;
  z-index: 999;
}
.menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background-color: #000;
}
.designMenuSection.show .menuOverlay {
  opacity: 0.64;
  visibility: visible;
}
.designMenuContainer {
  display: flex;
  position: fixed;
  right: 0;
  top: 0;
  width: 496px;
  height: 100%;
  background: #f5f5f5;
  overflow-y: auto;
  transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transform: translateX(200%);
}
.designMenuSection.show .designMenuContainer {
  transform: translateX(0);
}
.designMenuDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.designMenuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  background: var(--white);
  padding: 12px 24px;
  gap: 16px;
}
.menuHeaderTitle {
  font-size: 20px;
  color: #141414;
  font-weight: 900;
  line-height: 1;
}
.closeMenu {
  width: 48px;
  cursor: pointer;
}
.closeMenu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.designMenuDataSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  padding: 12px 32px;
}
.freshProcessText {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  line-height: 1.2;
}
.clearProcessText {
  font-size: 14px;
  color: var(--black);
  font-weight: 400;
  line-height: 1.2;
  padding-top: 8px;
}
.clearProcessText span {
  font-size: 22px;
  font-style: italic;
}
.designStepContainer {
  border-top: 1px solid #dddddd;
  padding-top: 12px;
  margin-top: 12px;
}
.stepByStepText {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  line-height: 1.5;
}
.designStepList {
  display: flex;
  width: 100%;
  background: var(--white);
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #dedede;
  gap: 24px;
}
.designStepIcon {
  width: 117px;
  height: 71px;
  border-radius: 16px;
  background: #d9d9d9;
}
.designStepDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.designStepTitle {
  font-size: 14px;
  color: #141414;
  font-weight: 800;
  line-height: 1;
}
.designStepsubText {
  font-size: 12px;
  color: var(--matterhornColor);
  font-weight: 300;
  line-height: 1.5;
  padding-top: 4px;
}
.simplySection {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  background: #fee293;
  border-radius: 16px;
  padding: 12px 16px;
}
.simplyTitle {
  font-size: 14px;
  color: var(--black);
  font-weight: 800;
  line-height: 1.2;
}
.simplyDetails {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 300;
  line-height: 1.5;
  flex: 1;
}
/* About Us Section Styling */
.aboutSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 38px;
  position: relative;
}
.aboutContentWrapper {
  max-width: 478px;
  margin: 0 auto;
}
.aboutStravaContentWrapper {
  max-width: 600px;
  margin: 0 auto;
}
.aboutStravaItemGallery {
  margin-bottom: 48px;
}
.vertNavBar {
  position: absolute;
  width: 180px;
  top: 0;
  right: 100px;
}
.vertNavBar.fixed {
  position: fixed;
  top: 10px;
}
.vertNavBarList {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 0;
}
.vertNavBarList::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 2px;
  height: 100%;
  background: #f0efef;
}
.vertNavBarList:first-child a {
  padding: 8px 8px 11px 14px;
}
.vertNavBarList a {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--matterhornColor);
  padding: 11px 0 11px 14px;
  border-left: 2px solid transparent;
  text-decoration: none;
}

.vertNavBarList a span {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--matterhornColor);
}
.vertNavBarList.vertNavBarSub a {
  padding: 4px 8px 4px 14px;
}

.vertNavBarList a:hover {
  color: #302e2e;
  font-weight: 500;
}

.vertNavBarList a:hover span {
  color: #302e2e;
  font-weight: 600;
}

.vertNavBarList a.active {
  color: var(--neroColor);
  font-weight: 600;
  border-left: 2px solid var(--neroColor);
}
.vertNavBarList a.active span {
  color: var(--neroColor);
  font-weight: 800;
}
.aboutTitle {
  font-size: 29px;
  color: #ff0000;
  font-weight: 800;
  line-height: 1.2;
}
.aboutTitle span {
  color: var(--black);
  display: flex;
}
.aboutText {
  font-size: 14px;
  color: var(--matterhornColor);
  font-weight: 400;
  line-height: 2;
  margin: 8px 0 24px;
}
.sectionContentItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}
.contentItemHeading {
  font-size: 18px;
  color: var(--black);
  font-weight: 800;
  line-height: 1.6;
}
.contentItemInfo {
  font-size: 14px;
  color: var(--matterhornColor);
  font-weight: 400;
  line-height: 1.7;
  font-style: italic;
  margin-top: 16px;
  border-left: 4px solid #838383;
  padding: 0 16px;
}
.contentItemDetails {
  font-size: 14px;
  color: var(--matterhornColor);
  font-weight: 400;
  line-height: 2;
  padding: 16px 0;
  margin: 0;
}
.contentItemGallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
}
.curiosityGalleryRow {
  width: 100%;
  display: flex;
  gap: 16px;
}
.contentItemGap {
  gap: 16px 0;
}
.contentGalleryItem {
  display: flex;
  overflow: hidden;
  border-radius: 8px;
}

.contentGalleryItem img {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}
.contentGalleryItem:hover img {
  transform: scale(1.1);
}
.designFirstColumn {
  width: 90% !important;
}
.designLastColumn {
  width: 80% !important;
}
.galleryImg24Radius {
  border-radius: 24px;
}
.aboutCodeDesignRow {
  width: 100%;
  display: flex;
  gap: 16px;
}
.aboutCodeDesignMobileRow {
  width: 100%;
  display: flex;
  gap: 16px;
}
.aboutCodeDesignMobileRow .contentGalleryItem {
  width: calc(50% - 8px);
}
.aboutCodeDesignGivingRow {
  width: 100%;
  display: flex;
  gap: 16px;
}
.contentGalleryItem.grayscale {
  /* width: calc(50% - 12px); */
  display: flex;
  filter: grayscale(100%);

  transition: all 0.6s ease-in;
  border-radius: 8px;
  overflow: hidden;
}
.contentGalleryItem.grayscale:hover {
  filter: grayscale(0%);
}
.opacity {
  display: flex;
  /*opacity: 0.24; */
  transition: opacity 0.6s ease-in;
  border-radius: 8px;
  overflow: hidden;
}
.opacity img {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}
.opacity:hover {
  opacity: 1;
}
.opacity:hover img {
  transform: scale(1.1);
}
.contentGalleryItemFull {
  width: 100%;
}
.contentGalleryItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showFullGallery {
  margin-bottom: 0 !important;
}
.contentFullGallery {
  width: 100%;
}
.breathingSection {
  margin: 26px 0 24px;
}
.breathingHeading {
  font-size: 24px;
  color: var(--black);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
}
.breathingDetails {
  font-size: 14px;
  color: var(--matterhornColor);
  font-weight: 400;
  line-height: 2;
}
.sectionDataDetails {
  margin: 16px 0 24px;
}
.sectionDataDetails p {
  font-size: 14px;
  color: var(--matterhornColor);
  font-weight: 400;
  line-height: 2;
  padding: 0;
  margin: 0;
}
.contentAutoGallery {
  display: flex;
  width: 100%;
  margin-bottom: 48px;
}
.contentAutoGalleryInfo {
  display: flex;
  margin: 0 auto;
  gap: 24px;
}
.contentAutoGalleryItem {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
}
.greatSection {
  display: flex;
  flex-direction: column;
  background: var(--neroColor1);
  padding: 32px 26px;
  border-radius: 8px;
  margin-bottom: 114px;
}
.greatHeading {
  font-size: 16px;
  color: var(--white);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
}
.greatDetails {
  font-size: 12px;
  color: var(--white);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 24px;
}
.greatButtonInfo {
  display: flex;
  width: 100%;
}
.letConnectBtn {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 14px;
  color: var(--black);
  font-weight: 500;
  line-height: 1;
  background: var(--white);
  padding: 0 20px;
  border-radius: 70px;
  text-decoration: none;
}
.letConnectBtn:hover {
  color: var(--white);
  font-weight: 500;
  background: rgba(149, 149, 149, 0.6);
}

/* achievement Tab Section */
.achieveTabSection {
  margin-top: 16px;
}
.achieveTabHeader {
  width: 100%;
  display: flex;
}
.achieveTabHeader .navTabBar {
  gap: 29px;
}
.achieveTabHeader .navTabBar button {
  height: auto;
  font-size: 16px;
  color: #686868;
  font-weight: 600;
  line-height: 1;
  padding: 0 3px 8px;
  border-radius: 0;
  background: transparent;
  border-bottom: 3px solid transparent;
}
.achieveTabHeader .navTabBar button:hover,
.achieveTabHeader .navTabBar button.active-button {
  font-weight: 600;
  color: var(--black);
  border-color: var(--black);
  background: transparent;
}
.achieveTabDetails {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 16px;
}
.achieveAwardsData {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.achieveAwardsRow {
  width: 100%;
  display: flex;
  gap: 16px;
}
.achieveAwardsList {
  width: 100%;
}

.achieveAwardsBox {
  width: 100%;
  display: flex;
  gap: 16px;
}

/* Gallery Section */
.contentGalleryBox {
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
}
.contentGalleryBoxRow {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(189px, 1fr));

  /* grid-template-columns: auto auto auto; */
  grid-auto-rows: 150px;
  gap: 17px;
  grid-auto-flow: dense;
  /* grid-template-columns: auto auto auto; */
}
.contentGalleryBoxItem {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contentGalleryBoxItem img {
  /* width: 100%;
  height: auto;
  display: inline-block; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-wide {
  grid-column: span 2;
}
.item-tall {
  grid-row: span 2;
}
.item-big {
  grid-column: span 2;
  grid-row: span 2;
}
.toastify.custom-toast {
  top: 48px;
  font-size: 16px;
  color: var(--white);
  line-height: 1;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  box-shadow: 0px 16px 20px -8px rgba(3, 5, 18, 0.1);
}
.toastify.custom-toast .toastify-avatar {
  margin-left: 0;
}
/* Go To Top */
.scrollTopSection {
  position: fixed;
  width: 44px;
  height: 44px;
  bottom: 60px;
  right: 60px;
  background: transparent;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(200px);
  transition: all 1s ease;
  cursor: pointer;
}
.scrollTopSection img {
  width: 100%;
}
.scrollTopSection.homeGoToTop {
  bottom: 20px;
}
.scrollTopSection.show {
  opacity: 1;
  transform: translateY(0);
}
/* Keyframe style */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes opacityAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes leftAnimation {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes arrowAnimation {
  0% {
    transform: translateX(-130px) rotate(-90deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}
@media (min-width: 1580px) and (max-width: 1680px) {
  .userInfo {
    margin-bottom: 40px;
  }
}
@media (min-width: 1681px) and (max-width: 1779px) {
  .userInfo {
    margin-bottom: 64px;
  }
  .userSummery {
    font-size: 16px;
  }
  .hoverUserPic {
    font-size: 23px;
  }
}

@media (min-width: 1780px) and (max-width: 1920px) {
  .container {
    max-width: 1540px;
  }
  .headerRow {
    padding: 56px 200px;
    /* max-width: 1440px; */
  }
  .logoArea {
    padding: 14px 40px;
    height: 66px;
  }
  .logoArea img {
    height: 37px;
  }

  .btnResume {
    width: 187px;
    height: 66px;
    font-size: 20px;
    font-weight: 500;
    padding: 21px 40px 21px 27px;
  }

  .btnResume .btnArrowIcon {
    width: 16px;
    height: 14px;
    margin-right: 25px;
  }

  .btnResume .btnDownloadIcon {
    width: 18px;
    height: 18px;
    margin-left: 25px;
  }

  .btnResume .btnDownloadIcon svg {
    transform: translateX(-130px) rotate(-90deg);
  }

  .btnResume::before {
    width: 41px;
    height: 41px;
    border-radius: 99px;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
  }
  .btnResume:hover {
    padding: 21px 21px 21px 21px;
  }

  .wrapperContainer {
    max-width: 1069px;
  }
  /* .dotBgInfo {
    height: 1150px;
  } */
  .userSection {
    padding: 64px 0 72px;
  }
  .userInfo {
    margin-bottom: 40px;
  }
  .userPic {
    width: 272px;
    height: 272px;
  }
  .hoverUserPic {
    font-size: 28px;
  }
  .userName {
    font-size: 64px;
    font-weight: 700;
    margin-top: 40px;
  }
  .userExpDetails {
    gap: 12px;
    margin-top: 24px;
  }
  .userExp {
    font-size: 20px;
    border-radius: 40px;
    padding: 8px 18px;
    border: 1px solid var(--silverColor);
  }
  .userExp img {
    width: 33px;
  }
  .userPositionBox {
    font-size: 20px;
    font-weight: 500;
  }
  .userPosition .greenDot {
    width: 11px;
    height: 11px;
    margin-right: 12px;
  }
  .userSummery {
    width: 90%;
    font-size: 20px;
    line-height: 1.3;
    margin-top: 24px;
  }
  .workCompanyInfo {
    padding: 72px 0 0;
  }
  .workCompListItem {
    height: 64px;
  }
  .workCompListItem img {
    max-width: 100%;
    max-height: 100%;
  }
  .featureTabSection {
    padding: 35px 0 64px;
  }
  .tabBarInfo {
    padding: 16px;
  }
  .navTabBar button {
    font-size: 20px;
    height: 62px;
  }
  .navTabBar button:hover,
  .navTabBar button.active-button {
    font-size: 20px;
  }
  .tabRightBar {
    height: 44px;
    border-left: 2px solid var(--whisperColor);
  }
  .designBtn {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    height: 62px;
    padding: 0 24px;
  }
  .designBtn:hover {
    font-size: 20px;
  }
  .tabContentSection {
    margin-top: 40px;
  }
  .contentItemData {
    padding: 32px 32px 40px;
  }
  .contentItemDataTopRow {
    margin-bottom: 40px;
  }
  .headingItem {
    font-size: 28px;
    padding: 5px 0;
  }
  .subItem {
    font-size: 20px;
  }
  .conversionItemSection {
    padding: 20px 0 0;
  }
  .conversionRate {
    font-size: 20px;
    font-weight: 800;
  }

  .conversionRate svg {
    width: 15px;
  }
  .conversionHandIcon svg {
    width: 23px;
  }
  .conversionRateText {
    font-size: 20px;
  }
  .viewBtn {
    height: 45px;
    font-size: 18px;
    padding: 0 16px;
  }
  .viewBtn svg {
    width: 13px;
  }
  .comingBtn {
    height: 45px;
    font-size: 18px;
    padding: 0 16px;
  }
  .userFixedSection {
    max-width: 940px;
    padding: 12px 16px;
  }
  .userFixedRight {
    gap: 16px;
  }
  .userFixedPicInfo {
    width: 68px;
    height: 68px;
  }
  .userFixedName {
    font-size: 24px;
  }
  .userFixedWork {
    font-size: 16px;
    font-weight: 500;
  }
  .userFixedActiveDot {
    width: 18px;
    height: 18px;
  }

  .userFixedActiveDot::before {
    width: 18px;
    height: 18px;
  }
  .userFixedActiveDot::after {
    width: 8px;
    height: 8px;
  }
  .btnWhy {
    height: 64px;
    font-size: 18px;
    padding: 0 27px;
  }

  .btnBook {
    height: 64px;
    font-size: 20px;
    padding: 0 34px;
  }
  .btnBook img {
    display: none;
    width: 16px;
    margin-left: 16px;
  }
  .btnBook:hover {
    font-size: 20px;
  }
  /*  */
  .recommendWrapper {
    padding: 64px 0 106px;
  }
  .recommendTitle {
    font-size: 48px;
  }
  .recommendSlider {
    margin-top: 40px;
  }

  .recommendSliderVariable .slick-prev {
    top: -64px;
    right: 30%;
    width: 57px;
    height: 57px;
  }
  .recommendSliderVariable .slick-prev::before {
    margin-left: 20px;
    width: 13px;
    height: 23px;
  }
  .recommendSliderVariable .slick-next {
    top: -64px;
    right: 25%;
    width: 57px;
    height: 57px;
  }
  .recommendSliderVariable .slick-next::before {
    margin-left: 24px;
    width: 13px;
    height: 23px;
  }

  .recommendSliderItem {
    padding: 48px 40px 40px;
  }

  .recommendItemHeading {
    font-size: 30px;
    font-weight: 700;
  }
  .recommendItemDetails {
    padding-top: 32px;
    height: 380px;
  }
  .recommendItemDetails p {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 34px;
  }
  .recommendItemUserData {
    margin-top: 24px;
    padding-top: 24px;
  }
  .recUserName {
    font-size: 24px;
    font-weight: 400;
  }
  .recUserName a {
    font-size: 24px;
  }
  .recUserdesignation {
    font-size: 20px;
    font-weight: 400;
  }
  .recUserRightData img {
    height: 70px;
  }
  /*  */

  .userSummarySection {
    padding: 56px;
    margin-bottom: 114px;
  }
  .userSummaryTitle {
    font-size: 48px;
    margin-bottom: 24px;
  }
  .userSummarySection p {
    font-size: 20px;
  }
  .userSummarySection p:not(:last-child) {
    margin-bottom: 40px;
  }
  .userSummaryDetails {
    margin-top: 24px;
    padding-top: 24px;
  }
  .userSummPic {
    width: 113px;
    height: 113px;
  }
  .userSummName {
    font-size: 24px;
  }
  .userSummCity {
    font-size: 16px;
    color: #9e9e9e;
    font-weight: 500;
    padding-top: 4px;
  }
  .aboutBtn {
    height: 68px;
    font-size: 20px;
    padding: 0 32px;
  }
  .aboutBtn:hover {
    font-size: 20px;
    color: var(--black);
    font-weight: 700;
    background: #f1f1f1;
  }
  .bookBtn {
    height: 68px;
    font-size: 20px;
    padding: 0 44px;
  }
  .bookBtn img {
    display: none;
    width: 16px;
    margin-left: 16px;
  }
  .bookBtn:hover {
    font-size: 20px;
  }
  .userSummaryExp {
    margin-top: 24px;
    padding-top: 24px;
  }
  .userSummaryExpHeading {
    font-size: 16px;
  }
  .userSummaryExpTitle {
    font-size: 20px;
  }
  .userSummaryAward {
    margin-top: 24px;
    padding-top: 32px;
  }
  .userSummaryAward:hover .userAwardLeft {
    left: -62px;
    bottom: -58px;
  }
  .userSummaryAward:hover .userAwardRight {
    right: -50px;
    bottom: -59px;
  }
  .userSummaryAwardList {
    gap: 32px;
  }
  .userSummaryAwardListData {
    gap: 28px;
  }
  /*  */
  .breakingWrapper {
    padding: 0 0 106px;
  }
  .breakingTitle {
    font-size: 48px;
  }
  .breakingTabSection {
    margin-top: 40px;
  }
  .breakingTabHeader .navTabBar button {
    font-size: 20px;
    width: 125px;
  }
  .breakingTabDetails {
    margin-top: 40px;
  }
  .contentAccordion .accordion-button {
    font-size: 20px;
  }

  .contentAccordion .accordion-body {
    font-size: 16px;
  }
  .contentShowBottom {
    margin-top: 24px;
  }

  .contentBottomTitle {
    font-size: 20px;
  }
  .contentBottomData {
    font-size: 16px;
  }
  .connectBtn {
    height: 68px;
    font-size: 20px;
    padding: 0 35px;
  }
  .footerSection {
    padding: 32px 0 32px;
  }
  .footerCopyText {
    font-size: 18px;
  }
  .footerCopyText a {
    font-size: 18px;
  }
  .footerCopyText a:hover {
    font-size: 18px;
  }
  .footerSocialLink a {
    font-size: 18px;
  }

  .footerSocialLink a svg {
    width: 12px;
    height: 12px;
    margin-left: 12px;
  }
  .contentAccordion .accordion-button::after {
    width: 20px;
    height: 20px;
    background-size: contain;
  }
  /* menu section */

  .designMenuContainer {
    width: 680px;
  }
  .designMenuHeader {
    height: 104px;
    padding: 24px;
  }
  .menuHeaderTitle {
    font-size: 24px;
  }
  .closeMenu {
    width: 56px;
  }

  .designMenuDataSection {
    padding: 32px;
  }
  .freshProcessText {
    font-size: 16px;
  }
  .clearProcessText {
    font-size: 20px;
  }
  .clearProcessText span {
    font-size: 30px;
  }
  .designStepContainer {
    padding-top: 24px;
    margin-top: 24px;
  }
  .stepByStepText {
    font-size: 16px;
  }
  .designStepList {
    margin-top: 16px;
    padding: 24px;
  }
  .designStepIcon {
    width: 240px;
    height: 146px;
  }

  .designStepTitle {
    font-size: 19px;
  }
  .designStepsubText {
    font-size: 16px;
    padding-top: 12px;
  }
  .simplySection {
    align-items: flex-start;
    margin-top: 24px;
    padding: 16px;
  }
  .simplyTitle {
    font-size: 20px;
    font-weight: 700;
  }
  .simplyDetails {
    font-size: 17px;
    font-weight: 400;
  }
  /*  */
  /* About Us Section Styling */
  .aboutSection {
    margin-top: 39px;
  }
  .aboutContentWrapper {
    max-width: 634px;
  }
  .aboutStravaContentWrapper {
    max-width: 800px;
  }
  .aboutStravaItemGallery {
    margin-bottom: 72px;
  }
  .vertNavBar {
    width: 202px;
    right: 100px;
  }
  .vertNavBarList:first-child a {
    padding: 8px 8px 11px 15px;
  }
  .vertNavBarList a {
    font-size: 13px;
    padding: 11px 8px 11px 15px;
  }

  .vertNavBarList a span {
    font-size: 16px;
  }
  .vertNavBarList.vertNavBarSub a {
    padding: 6px 15px 6px 14px;
  }
  .aboutTitle {
    font-size: 40px;
  }
  .aboutText {
    font-size: 16px;
  }
  .sectionContentItem {
    margin-bottom: 64px;
  }
  .contentItemHeading {
    font-size: 24px;
  }
  .contentItemInfo {
    font-size: 18px;
    margin-top: 24px;
  }
  .contentItemDetails {
    font-size: 16px;
    padding: 24px 0;
  }
  .contentItemGallery {
    gap: 24px 24px;
  }
  .curiosityGalleryRow {
    gap: 24px;
  }
  .contentItemGap {
    gap: 24px 0;
  }
  .aboutCodeDesignRow {
    gap: 24px;
  }
  .aboutCodeDesignGivingRow {
    gap: 24px;
  }
  .breathingSection {
    margin: 42px 0 40px;
  }
  .breathingHeading {
    font-size: 40px;
  }
  .breathingDetails {
    font-size: 19px;
  }
  .sectionDataDetails p {
    font-size: 19px;
  }
  .contentAutoGallery {
    margin-bottom: 64px;
  }
  .greatSection {
    margin-bottom: 88px;
  }
  .greatHeading {
    font-size: 24px;
    font-weight: 700;
  }
  .greatDetails {
    font-size: 18px;
    margin-bottom: 32px;
  }
  .letConnectBtn {
    height: 64px;
    font-size: 20px;
    font-weight: 700;
    padding: 0 35px;
  }
  .letConnectBtn:hover {
    font-weight: 700;
  }

  /* achievement Tab Section */
  .achieveTabSection {
    margin-top: 8px;
  }
  .achieveTabHeader {
    width: 100%;
    display: flex;
  }
  .achieveTabHeader .navTabBar {
    gap: 40px;
  }
  .achieveTabHeader .navTabBar button {
    font-size: 20px;
  }
  .achieveTabHeader .navTabBar button:hover,
  .achieveTabHeader .navTabBar button.active-button {
    font-size: 20px;
    font-weight: 600;
  }
  .achieveTabDetails {
    margin-top: 24px;
  }
  .achieveAwardsList img {
    width: 100%;
  }
  /* Gallery Section */

  .contentGalleryBoxRow {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    /* grid-template-columns: auto auto auto; */
    grid-auto-rows: 200px;
    gap: 23px;
    grid-auto-flow: dense;
    /* grid-template-columns: auto auto auto; */
  }
  .scrollTopSection.homeGoToTop {
    bottom: 37px;
  }
}
@media (min-width: 1900px) and (max-width: 1920px) {
  .vertNavBar {
    width: 202px;
    right: 220px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
}
@media (min-width: 992px) and (max-width: 1024px) {
}
@media screen and (min-width: 1200px) {
  /* .container {
    max-width: 1260px;
  } */
}

@media (max-width: 767px) {
  /* Intro Section */
  .introTitle {
    font-size: 42px;
  }
  .introWelcome {
    font-size: 12px;
  }
  .introImage {
    margin-left: 4px;
  }
  .introImage img {
    height: 21px;
  }
  /*  */
  .topSection {
    min-height: 92vh;
  }
  .headerSticky {
    position: sticky;
    top: 10px;
  }
  header {
    width: 100%;
    padding: 18px 24px;
  }
  .innerHeader {
    padding: 18px 16px;
  }
  .headerRow {
    width: 100%;
    background: #dddddd;
    border-radius: 70px;
    padding: 0;
  }
  .logoArea {
    background: transparent;
    padding: 10px 16px;
  }
  .btnResume {
    display: none;
  }
  .menuInfo {
    display: flex;
  }
  .userSection {
    /* padding: 54px 0 60px; */
    padding: 48px 0;
  }
  .userContainer {
    max-width: 100%;
    width: 100%;
    padding: 0 16px;
  }
  .wrapperContainer {
    max-width: 100%;
    width: 100%;
  }

  .userPic {
    width: 153px;
    height: 153px;
  }
  .userName {
    font-size: 24px;
    margin-top: 16px;
    text-align: center;
  }
  .userExpDetails {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  .userExp {
    justify-content: center;
    padding: 8px 14px;
  }
  .userExp img {
    width: 20px;
    margin-right: 8px;
  }
  .userExpDesign {
    display: flex;
  }
  .userPositionBox {
    padding: 11px 12px;
  }
  .userSummery {
    width: 100%;
    line-height: 2;
    margin-top: 16px;
    padding: 0 10px;
  }
  .workCompanyInfo {
    /* padding: 56px 0 0; */
    padding: 48px 0 0;
  }
  .workCompList {
    height: 50px;
  }
  .workCompList .slick-slide {
    height: 56px;
  }
  .workCompList .slick-slide > div,
  .workCompList .workCompListItem {
    height: 56px;
  }
  .workCompList .workCompListItem {
    padding: 0 12px;
  }
  .workCompListItem:hover {
    transform: scale(1.05);
  }
  .featureTabSection {
    padding: 0;
  }
  .tabBarInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: var(--white);
    border: none;
    box-shadow: none;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .navTabBar {
    gap: 19px;
  }
  .navTabBar button {
    font-size: 14px;
    font-weight: 500;
    color: #9d9d9d;
    line-height: 1;
    height: 48px;
    padding: 0 3px;
    border: none;
    border-radius: 0;
    background: var(--white);
    cursor: pointer;
    border-bottom: 4px solid transparent;
    white-space: nowrap;
    /* transition: all 0.5s ease-in; */
  }
  .navTabBar button .deskTab {
    display: none;
  }
  .navTabBar button .mobileTab {
    display: block;
  }
  .navTabBar button:hover,
  .navTabBar button.active-button {
    font-size: 14px;
    color: var(--black);
    font-weight: 500;
    background: var(--white);
    border-bottom: 4px solid var(--black);
  }
  .tabRightBar {
    height: 48px;
    border-left: none;
    padding-left: 0;
  }
  .designBtn {
    display: flex;
    align-items: center;
    height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: #9d9d9d;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    border-bottom: 4px solid transparent;
  }
  .designBtn svg {
    width: 10px;
    display: block;
  }
  .designBtn svg path {
    fill: #9d9d9d;
  }
  .designBtn:hover {
    font-size: 14px;
    color: var(--black);
    font-weight: 500;
    border-bottom: 4px solid var(--black);
    background: transparent;
    border-radius: 0;
  }
  .designBtn:hover svg path {
    fill: #000000;
  }
  .tabContentSection {
    margin-top: 24px;
    padding: 0 16px;
    margin-bottom: 24px;
  }
  /* */
  .contentItem {
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .contentItemData {
    padding: 16px 12px;
  }

  .contentItemDataTopRow {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
  }
  .headingItem {
    font-size: 18px;
    font-weight: 800;
    padding: 0 0 8px;
  }
  .subItem {
    font-size: 14px;
  }
  .conversionItemSection {
    display: none;
  }

  .contentItemButton {
    display: flex;
  }
  .viewBtn {
    width: 100%;
    height: 48px;
    background: linear-gradient(90deg, #171717 0%, #3f3f3f 100%);
    justify-content: space-between;
    padding: 0 16px;
  }
  .deskView {
    display: none !important;
  }
  .mobileView {
    display: block !important;
  }
  .mobileWFull {
    width: 100% !important;
  }
  .mobileWFull {
    width: 100% !important;
  }
  .mobileWFull {
    width: 100% !important;
  }
  .comingBtn {
    width: 100%;
    height: 48px;
    padding: 0 16px;
  }
  /* */
  .userFixedSection {
    left: 24px;
    right: 24px;
    max-width: calc(100% - 48px);
    width: calc(100% - 48px);
    gap: 20px;
    padding: 5px 9px;
    transform: translateY(150%);
  }
  .showFixed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
  }
  .userFixedLeft {
    gap: 8px;
  }
  .userFixedPicInfo {
    width: 46px;
    height: 46px;
  }
  .userFixedName {
    font-size: 14px;
  }
  .userFixedWork {
    font-size: 12px;
    padding-top: 2px;
  }
  .btnWhy {
    display: none;
  }
  .btnBook img {
    display: none;
  }
  /*  */
  .recommendWrapper {
    padding: 32px 0 48px;
  }
  .recommendTitle {
    font-size: 24px;
    padding: 0 16px;
    margin-bottom: 32px;
  }
  .recommendSlider {
    margin-top: 24px;
  }
  .recommendSliderVariable .slick-slide {
    padding-right: 8px;
  }

  .recommendSliderItem {
    padding: 16px;
    border-radius: 16px;
  }
  .recommendItemHeading {
    font-size: 18px;
    line-height: 1.5;
  }
  .recommendItemDetails {
    padding-top: 28px;
    height: 390px;
  }
  .recommendItemDetails p {
    color: #cdcdcd;
    margin-bottom: 28px;
  }

  .recommendItemUserData {
    margin-top: 14px;
    padding-top: 14px;
  }
  .recUserLeftData {
    gap: 8px;
  }
  .recUserPic {
    width: 40px;
    height: 40px;
  }
  .recUserName {
    font-size: 12px;
  }
  .recUserdesignation {
    font-size: 12px;
    padding-top: 4px;
  }
  .recUserRightData img {
    height: 35px;
  }
  /* */
  .userSummarySection {
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 48px;
    background: #f5f5f5;
  }
  .userSummaryTitle {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .userSummarySection p {
    font-size: 14px;
    color: var(--neroColor1);
    font-weight: 400;
  }
  .userSummarySection p:not(:last-child) {
    margin-bottom: 28px;
  }
  .userSummaryDetails {
    flex-direction: column;
    gap: 16px;
  }
  .userSummLeft {
    gap: 16px;
  }
  .userSummPic {
    width: 64px;
    height: 64px;
  }
  .userSummName {
    font-size: 18px;
  }
  .userSummCity {
    font-size: 12px;
  }
  .userSummRight {
    gap: 12px;
  }
  .aboutBtn {
    flex: 1;
    justify-content: space-between;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 16px;
    text-decoration: none;
  }
  .aboutBtn svg {
    width: 10px;
    height: 9px;
  }
  .aboutBtn svg path {
    fill: var(--black);
  }
  .aboutBtn:hover {
    color: var(--black);
    background: #f1f1f1;
  }
  .aboutBtn:hover svg path {
    fill: var(--black);
    color: var(--white);
    background: var(--neroColor3);
  }
  .bookBtn {
    flex: 1;
    justify-content: space-between;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
  }
  .bookBtn img {
    width: 13px;
    margin-left: 14px;
  }
  .userSummaryExp {
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
  }
  .userSummaryExpItem {
    display: flex;
    justify-content: space-between;
  }
  .userSummaryExpHeading {
    font-size: 14px;
    font-weight: 400;
  }
  .userSummaryExpTitle {
    font-size: 14px;
    font-weight: 700;
    padding-top: 0;
  }
  .userSummaryAward {
    margin-top: 24px;
    padding-top: 24px;
  }
  .userSummaryAwardList {
    display: flex;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    padding: 0;
  }

  .userSummaryAwardListData {
    display: flex;
    width: 100%;
    gap: 19px;
  }
  .menuBottomDetails .userSummaryAwardListData {
    padding: 0 16px;
  }
  .userSummaryAwardItem {
    display: flex;
  }
  .userSummaryAwardItem img {
    min-width: inherit;
    height: 48px;
    max-width: inherit;
  }
  .userAwardLeft {
    display: none;
  }
  #voiceClip {
    display: none;
  }
  .userAwardRight {
    display: none;
  }
  .awardLeftImage {
    display: none;
  }
  .awardRightImage {
    display: none;
  }
  /*  */
  .breakingWrapper {
    padding: 0;
  }
  .breakingSection {
    border-radius: 0;
    padding: 32px 16px;
  }
  .breakingTitle {
    font-size: 24px;
    padding-bottom: 12px;
  }
  .breakingTabSection {
    margin-top: 12px;
  }
  .breakingTabHeader {
    padding: 12px 0;
    overflow: hidden;
    overflow-x: scroll;
  }
  .breakingTabHeader .navTabBar {
    gap: 24px;
  }
  .breakingTabHeader .navTabBar button {
    height: auto;
    width: auto;
    padding: 0;
    background: var(--neroColor1);
    border-bottom: none;
  }
  .breakingTabDetails {
    margin-top: 12px;
  }
  .contentAccordion .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 16px;
  }
  .contentAccordion .accordion-button {
    font-size: 14px;
    padding: 12px 48px 12px 12px;
  }
  .contentAccordion .accordion-body {
    padding: 14px 35px 14px 12px;
  }
  .contentShowBottom {
    flex-direction: column;
    margin-top: 0;
    border-top: 1px solid #323232;
    padding-top: 24px;
  }
  .contentShowBottomLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0;
    margin-bottom: 14px;
  }
  .contentBottomTitle {
    font-size: 16px;
  }
  .contentBottomData {
    font-size: 14px;
    font-weight: 300;
    padding-top: 4px;
    line-height: 1.6;
  }
  .contentShowBottomRight {
    display: flex;
    width: 100%;
  }
  .connectBtn {
    width: 100%;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
  }
  .connectBtn svg {
    width: 13px;
    height: 9px;
  }
  .connectBtn:hover {
    color: var(--white);
    background: rgba(149, 149, 149, 0.6);
  }
  .connectBtn:hover svg path {
    fill: var(--white);
  }
  /*  */
  .designMenuContainer {
    display: flex;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    overflow-y: auto;
    border-radius: 0;
    transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transform: translateX(0%);
    transform: translateY(200%);
  }
  .designMenuSection.show .designMenuContainer {
    transform: translateX(0);
    transform: translateY(0);
  }
  .menuHeaderTitle {
    font-size: 16px;
  }
  .designMenuDataSection {
    padding: 12px 16px;
  }
  .freshProcessText {
    font-size: 14px;
  }
  .clearProcessText {
    font-size: 14px;
  }
  .clearProcessText span {
    font-size: 22px;
  }
  .stepByStepText {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
  }
  .designStepList {
    flex-direction: column;
  }
  .designStepIcon {
    width: 100%;
    height: 194px;
    border-radius: 16px;
    background: #d9d9d9;
  }
  .designStepTitle {
    font-size: 16px;
  }
  .designStepsubText {
    padding-top: 8px;
  }
  /* About Us Section Styling */
  .aboutSection {
    margin-top: 28px;
  }
  .aboutContentWrapper {
    max-width: 100%;
    width: 100%;
    padding: 0 16px;
  }
  .aboutStravaContentWrapper {
    max-width: 100%;
    width: 100%;
    padding: 0 16px;
  }
  .aboutStravaItemGallery {
    margin-bottom: 34px;
  }
  .vertNavBar {
    display: none;
  }
  .aboutTitle {
    font-size: 24px;
  }
  .aboutText {
    margin: 12px 0 40px;
  }
  .sectionContentItem {
    margin-bottom: 34px;
  }
  .contentItemHeading {
    font-size: 18px;
    font-weight: 800;
  }
  .contentBreathingHead {
    font-size: 20px !important;
  }
  #achievement .contentItemHeading {
    font-size: 24px;
    line-height: 1;
  }
  #achievement .contentItemDetails {
    padding-top: 16px;
  }
  .contentItemInfo {
    font-size: 14px;
    margin-top: 24px;
    padding: 0 14px;
  }
  .contentItemDetails {
    font-size: 14px;
    padding: 24px 0;
    margin: 0;
  }
  .contentItemGallery {
    gap: 16px 16px;
  }
  .curiosityGalleryRow {
    gap: 16px;
  }
  .contentItemGap {
    gap: 16px 0;
  }
  .aboutCodeDesignRow {
    display: flex;
    width: 100%;
    gap: 16px;
  }
  .codeToDesign .aboutCodeDesignRow {
    flex-direction: column;
  }
  .contentAutoGallery {
    padding: 0 16px;
  }
  .aboutCodeDesignMobileRow {
    width: 100%;
    display: flex;
    gap: 16px;
  }
  .aboutCodeDesignMobileRow.mobileView {
    display: flex !important;
  }
  .aboutCodeDesignMobileRow .contentGalleryItem {
    width: calc(50% - 8px);
  }
  .fullGalleryItem {
    flex-direction: column;
  }
  .fullGalleryItem .contentGalleryItem {
    width: 100%;
  }
  .opacity {
    opacity: 1;
  }
  .aboutCodeDesignGivingRow {
    width: 100%;
    display: flex;
    gap: 16px;
  }

  .breathingSection {
    margin: 14px 0 40px;
  }
  .breathingHeading {
    font-size: 24px;
    letter-spacing: -1px;
  }
  .breathingDetails {
    font-size: 14px;
  }
  .sectionDataDetails p {
    font-size: 14px;
  }
  .contentAutoGallery {
    overflow: hidden;
    overflow-x: scroll;
    margin-bottom: 57px;
  }
  .contentAutoGalleryInfo {
    display: flex;
    gap: 24px;
  }
  .contentAutoGalleryItem {
    width: 209px;
    height: 278px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
  }
  .greatSection {
    padding: 24px 16px;
    margin-bottom: 77px;
  }
  .greatButtonInfo {
    display: flex;
    width: 100%;
  }
  .letConnectBtn {
    width: 100%;
    justify-content: space-between;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    padding: 0 20px;
  }
  .letConnectBtn svg {
    width: 13px;
    height: 9px;
  }
  .letConnectBtn svg path {
    fill: var(--black);
  }
  .letConnectBtn:hover svg path {
    fill: var(--white);
  }

  /* achievement Tab Section */
  .achieveTabSection {
    margin-top: 0;
  }
  .achieveTabHeader .navTabBar {
    gap: 16px;
  }
  .achieveTabHeader .navTabBar button {
    font-size: 14px;
    padding: 0 8px 8px;
    border-bottom: 2px solid transparent;
  }
  .achieveAwardsRow {
    flex-direction: column;
  }
  .achieveAwardsList img {
    width: 100%;
  }
  /* Gallery Section */

  .contentGalleryBoxRow {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    grid-auto-rows: auto;
    gap: 16px;
  }
  .item-wide {
    grid-column: span 2;
  }
  .item-tall {
    grid-row: span 2;
  }
  .item-big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .contentGalleryItem:hover img {
    transform: scale(1);
  }
  /* footer*/
  .footerCopyText {
    width: 100%;
  }
  .footerSocialLink {
    display: none;
  }
  .toastify.custom-toast {
    display: flex;
    align-items: center;
    top: 54px !important;
    font-size: 14px;
    margin: 0 16px;
  }
  .toastify .toastify-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .scrollTopSection {
    position: fixed;
    width: 32px;
    height: 32px;
    bottom: 50px;
    right: 20px;
  }
}