/*
 * Auto-generated file.
 * Source of truth: src/styles/marketing-modules/*.css
 * Run: pnpm styles:build
 */
/*-----------------------------------------------------------------------------------

  Theme Name: Redox - Creative Agency and Portfolio HTML Template
  Author: ravextheme
  Support: https://support.rrdevs.net/
  Description: Redox - Creative Agency and Portfolio HTML Template
  Version: 1.0.2

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

/************ TABLE OF CONTENTS ***************
variable css
typography css
animation css
global css
theme css
Preloader css
scroll css
button css
button animation css
menu css
modal css
cursor css
digital agency page css
design agency page css
creative agency page css
marketing agency page css
startup agency page css
portfolio agency page css
portfolio page css
parallax carousal page css
portfolio showcase page css
portfolio showcase 2 page css
404 page css
about page css
blog details page css
blog page css
contact page css
faq page css
service details page css
sercices page css
team details page css
work details page css
work page css

/*----------------------------------------*/
/* variable css  */
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
:root {
  --primary: #000000;
  --secondary: #555555;
  --border: rgba(17, 17, 17, 0.1);
  --bg: #000000;
  --theme: #0077FF;
  --black: #000000;
  --black-2: #999999;
  --white: #FFFFFF;
  --white-2: #999999;
  --action: #0077FF;
}
:root .dark {
  --primary: #ffffff;
  --secondary: #999999;
  --border: rgba(255, 255, 255, 0.1);
  --bg: #171717;
}

/*----------------------------------------*/
/* typography css  */
/*----------------------------------------*/
/* Thunder */
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-BoldLC.ttf");
  font-weight: 700;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-SemiBoldLC.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-LC.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Thunder";
  src: url("../fonts/Thunder-MediumLC.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "Sequel Sans Roman Body";
  src: url("../fonts/Sequel Sans Roman Body.otf");
  font-weight: 310;
}
@font-face {
  font-family: "Sequel Sans Medium Body";
  src: url("../fonts/Sequel Sans Medium Body.otf");
  font-weight: 315;
}
:root {
  --font_heading: "Instrument Sans", sans-serif;
  --font_body: "DM Sans", sans-serif;

  --font_dmsans: var(--font_body);
  --font_instrumentsans: var(--font_heading);
  --font_thunder: "Thunder";
  --font_sequelsansromanbody: "Sequel Sans Roman Body";
  --font_sequelsansmediumbody: "Sequel Sans Medium Body";
  --font_timesnow: var(--font_heading);
  --font_bdogrotesk: var(--font_body);
  --font_tartuffo: var(--font_heading);
  --font_tartuffotrial: var(--font_heading);
}

.font-heading-instrumentsans-medium h1,
.font-heading-instrumentsans-medium h2,
.font-heading-instrumentsans-medium h3,
.font-heading-instrumentsans-medium h4,
.font-heading-instrumentsans-medium h5,
.font-heading-instrumentsans-medium h6 {
  font-family: var(--font_instrumentsans);
}
.font-heading-sequelsans-romanbody h1,
.font-heading-sequelsans-romanbody h2,
.font-heading-sequelsans-romanbody h3,
.font-heading-sequelsans-romanbody h4,
.font-heading-sequelsans-romanbody h5,
.font-heading-sequelsans-romanbody h6 {
  font-family: var(--font_sequelsansromanbody);
}
.font-heading-thunder-regular h1,
.font-heading-thunder-regular h2,
.font-heading-thunder-regular h3,
.font-heading-thunder-regular h4,
.font-heading-thunder-regular h5,
.font-heading-thunder-regular h6 {
  font-family: var(--font_thunder);
}
.font-heading-bdogrotesk-regular h1,
.font-heading-bdogrotesk-regular h2,
.font-heading-bdogrotesk-regular h3,
.font-heading-bdogrotesk-regular h4,
.font-heading-bdogrotesk-regular h5,
.font-heading-bdogrotesk-regular h6 {
  font-family: var(--font_bdogrotesk);
}
.font-heading-tartuffotrial-thin h1,
.font-heading-tartuffotrial-thin h2,
.font-heading-tartuffotrial-thin h3,
.font-heading-tartuffotrial-thin h4,
.font-heading-tartuffotrial-thin h5,
.font-heading-tartuffotrial-thin h6 {
  font-family: var(--font_tartuffotrial);
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font_body);
  line-height: 1;
}

html {
  scroll-behavior: smooth;
}

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

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

li {
  list-style: none;
}

a {
  text-decoration: none;
  transition: all 0.3s;
  color: inherit;
}
a:hover {
  color: var(--primary);
}

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

p {
  padding: 0;
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: var(--secondary);
}
@media only screen and (max-width: 1399px) {
  p {
    font-size: 20px;
    line-height: 28px;
  }
}

strong {
  font-weight: 500;
}

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

img {
  max-width: 100%;
}

.medium {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }
  .row.g-0 {
    padding-right: 0;
    padding-left: 0;
  }
  br {
    display: none;
  }
}
main {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

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

@keyframes t-Bubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes t-Zoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes t-Zoom_2 {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
@keyframes t-SlideBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes t-reveal {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes t-fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes t-spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes t-characters {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes t-sheen {
  50% {
    transform: translateY(-20px);
    color: var(--primary);
  }
}
@keyframes t-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(-130px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*----------------------------------------*/
/* global css */
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  z-index: 9;
  pointer-events: none;
  top: 0;
  opacity: 1;
  inset-inline-start: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: repeat;
  background-position: top left;
  background-image: url(../imgs/writer/body-bg.webp);
}

.container-xl {
  max-width: 1550px;
}

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

.text-slider-active .swiper-slide {
  width: auto;
}

::-webkit-scrollbar {
  width: 5px;
}

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

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

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

.pos-abs {
  position: absolute;
}

.circle-text {
  width: 140px;
  height: 140px;
  position: relative;
  border-radius: 100px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
@media only screen and (max-width: 991px) {
  .circle-text {
    width: 120px;
    height: 120px;
  }
}
.circle-text .text {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: var(--primary);
  position: absolute;
  -webkit-animation: textRotation 8s linear infinite;
  animation: textRotation 8s linear infinite;
}
@-webkit-keyframes textRotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes textRotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.circle-text .text span {
  left: 50%;
  top: 0px;
  font-size: 14px;
  text-transform: uppercase;
  position: absolute;
  transform-origin: 0 65px;
}
.circle-text .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle-text:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 37px solid transparent;
  border-radius: 50%;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.fix {
  overflow: hidden;
}

.bg-full {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.bg-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.border-top-bottom {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.has-top-line {
  position: relative;
  padding-top: 10px;
}
.has-top-line:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  top: 0;
  left: 0;
}

.has-bottom-line {
  position: relative;
  padding-bottom: 10px;
}
.has-bottom-line:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  bottom: 0;
  left: 0;
}

.has-left-line {
  position: relative;
  padding-inline-start: 35px;
  display: inline-block;
}
.has-left-line:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
}

.has-right-line {
  position: relative;
  padding-inline-end: 35px;
  display: inline-block;
}
.has-right-line:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}

.t-btn-play {
  width: 56px;
  height: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1.5px solid currentColor;
  color: var(--primary);
  border-radius: 50%;
  transition: all 0.5s;
  font-size: 14px;
}
@media only screen and (max-width: 767px) {
  .t-btn-play {
    width: 50px;
    height: 50px;
    font-size: 12px;
    border-width: 1px;
  }
}
.t-btn-play:hover {
  color: var(--theme, --action);
}
.t-btn-play.light {
  color: var(--white);
}
.t-btn-play.light:hover {
  color: var(--white);
}
.t-btn-play.dark {
  color: var(--black);
}
.t-btn-play.dark:hover {
  color: var(--black);
}

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

.show-dark {
  display: none;
}

.line-area {
  position: relative;
}

.lines {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.lines .line {
  width: 1px;
  height: 100%;
  background-color: rgba(0, 81, 83, 0.031372549);
  display: inline-block;
  position: relative;
  z-index: 1;
}

.t-btn-icon i {
  transform: rotate(-45deg);
  transition: all 0.3s;
  font-size: 20px;
  color: var(--primary);
}
.t-btn-icon:hover i {
  transform: rotate(0);
}

.list-check li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
}
.list-check li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  background-image: url("../imgs/electrician/check-mark.webp");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  top: 4px;
  transform: rotateY(0deg);
}
.list-check li:last-child {
  margin-bottom: 0;
}

.list-plus li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
}
.list-plus li::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  top: -10px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}
.list-plus li:not(:last-child) {
  margin-bottom: 10px;
}

.pos-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.pagination-with-dash {
  font-size: 14px;
  display: flex;
  gap: 10px;
  color: var(--primary);
  align-items: center;
}
.pagination-with-dash .dash {
  width: 100px;
  height: 1px;
  background-color: var(--primary);
}
.pagination-with-dash .swiper-pagination-current {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pagination-with-dash .swiper-pagination-current:before {
  content: url(../imgs/icon/arrow-left.webp);
}
.pagination-with-dash .swiper-pagination-total {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pagination-with-dash .swiper-pagination-total:after {
  content: url(../imgs/icon/arrow-right.webp);
}

.t__toggle_switcher .slide-toggle-wrapper {
  display: flex;
  justify-content: center;
}
.t__toggle_switcher .slide-toggle-btn {
  --switcher-width: 40px;
  --switcher-border-width: 2px;
  --switcher-indicator-width: 16px;
  background-color: #F0F7F8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
}
.t__toggle_switcher .slide-toggle-btn input {
  display: none;
}
.t__toggle_switcher .before_label,
.t__toggle_switcher .after_label {
  cursor: pointer;
  font-size: 18px;
  color: var(--primary);
}
.t__toggle_switcher .toggle-pane {
  display: none;
}
.t__toggle_switcher .toggle-pane.show {
  display: block;
}
.t__toggle_switcher.style-1 .switcher {
  display: inline-block;
  width: var(--switcher-width);
  height: 20px;
  background-color: #999999;
  border: var(--switcher-border-width) solid #999999;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
.t__toggle_switcher.style-1 .switcher::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--switcher-indicator-width);
  height: var(--switcher-indicator-width);
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translate(0px, -50%);
}
.t__toggle_switcher.style-1 input:checked + .switcher::before {
  transform: translate(calc(var(--switcher-width) - (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))), -50%);
}
.t__toggle_switcher.style-1 input:checked + .switcher {
  background-color: #000;
  border-color: #000;
}
.t__toggle_switcher.style-2 .before_label,
.t__toggle_switcher.style-2 .after_label {
  padding: 22px 38px;
  position: relative;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  color: var(--primary);
}
.t__toggle_switcher.style-2 .before_label:after,
.t__toggle_switcher.style-2 .after_label:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 60px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--theme);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s;
}
.t__toggle_switcher.style-2 .before_label.active,
.t__toggle_switcher.style-2 .after_label.active {
  color: var(--primary);
}
.t__toggle_switcher.style-2 .before_label.active:after,
.t__toggle_switcher.style-2 .after_label.active:after {
  opacity: 1;
  visibility: visible;
  transform: translatex(0);
}
.t__toggle_switcher.style-2 .before_label:after {
  transform: translatex(100%);
}
.t__toggle_switcher.style-2 .after_label:after {
  transform: translatex(-100%);
}
.t__toggle_switcher.style-2 .slide-toggle-btn {
  gap: 0;
  border-radius: 60px;
}

.parallax-view {
  overflow: hidden;
}

.hover-reveal {
  position: relative;
  overflow: hidden;
  cursor: auto;
}
.hover-reveal:hover > *:first-child {
  opacity: 1 !important;
}
.hover-reveal > *:first-child {
  opacity: 0;
  z-index: 1;
}

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

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

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

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

.section-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--primary);
}

.section-title {
  font-size: 100px;
}
@media only screen and (max-width: 1919px) {
  .section-title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .section-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title {
    font-size: 33px;
  }
}
.section-title.font-instrumentsans-medium {
  font-family: var(--font_instrumentsans);
  font-weight: 500;
  line-height: 0.9;
}
.section-title.font-sequelsans-romanbody {
  font-family: var(--font_sequelsansromanbody);
  font-weight: 310;
  line-height: 0.9;
  letter-spacing: -0.07em;
}
@media only screen and (max-width: 991px) {
  .section-title.font-sequelsans-romanbody {
    line-height: 1.1;
  }
}
.section-title.font-thunder-regular {
  font-family: var(--font_thunder);
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
}
.section-title.font-thunder-regular span {
  font-family: var(--font_timesnow);
  color: rgba(17, 17, 17, 0.4);
  display: inline-block;
  line-height: 0;
}
.section-title.font-bdogrotesk-regular {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 991px) {
  .section-title.font-bdogrotesk-regular {
    line-height: 1.1;
  }
}
.section-title.font-tartuffotrial-thin {
  font-family: var(--font_tartuffotrial);
  font-weight: 100;
  line-height: 1;
}

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

.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

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

.side-info-close {
  font-size: 18px;
  padding: 0;
  transition: all 0.3s linear;
  background-color: var(--white);
  color: var(--black);
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  line-height: 38px;
}
.dark .side-info-close {
  background-color: #292828;
  color: var(--white);
}
.side-info-close:hover {
  transform: rotate(90deg);
}

.side-info {
  background: var(--white) none repeat scroll 0 0;
  padding: 40px 45px;
  position: fixed;
  right: 0;
  top: 0;
  width: 500px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 9999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.dark .side-info {
  background-color: var(--black);
}
.side-info ::-webkit-scrollbar {
  display: none;
}
@media (max-width: 575px) {
  .side-info {
    width: 100%;
    padding: 30px 30px;
  }
}
.side-info.info-open {
  opacity: 1;
  transform: translateX(0);
}

.offset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.offset-logo {
  width: 120px;
}
@media (max-width: 575px) {
  .offset-logo {
    width: 100px;
  }
}
.offset-logo img {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
  object-fit: contain;
}
.dark .offset-logo .light-logo {
  display: none;
}
.offset-logo .dark-logo {
  display: none;
}
.dark .offset-logo .dark-logo {
  display: block;
}
.offset-button {
  margin-top: 40px;
}
@media (min-width: 576px) {
  .offset-button {
    display: none;
  }
}

.offset-widget-box {
  margin-top: 40px;
}
.offset-widget-box .title {
  font-size: 24px;
  line-height: 1.33;
  margin-bottom: 15px;
}
@media only screen and (max-width: 1919px) {
  .offset-widget-box .title {
    margin-bottom: 22px;
  }
}
.offset-widget-box .contact-meta > *:not(:first-child) {
  margin-top: 16px;
}
.offset-widget-box .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offset-widget-box .contact-item span {
  color: var(--primary);
  font-weight: 500;
}
.offset-widget-box .contact-item span a:hover {
  color: var(--secondary);
}
.offset-widget-box .contact-item .icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  border: 1px solid var(--primary);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--primary);
}

/* mean menu customize */
.mobile-menu {
  margin-top: 40px;
}
.mobile-menu.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mobile-menu.mean-container .mean-nav ul li {
  position: relative;
}
.mobile-menu.mean-container .mean-nav ul li > ul.mean-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.2s ease;
}
.mobile-menu.mean-container .mean-nav ul li.submenu-open > ul.mean-submenu {
  max-height: var(--submenu-max-height, 640px);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--border);
}
.mobile-menu.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.mobile-menu.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #FFA38E;
  color: var(--black-2);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.mobile-menu.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 0px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  text-transform: capitalize;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
  opacity: 1;
  background: transparent;
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}
.mobile-menu.mean-container .mean-nav ul li a:hover {
  color: var(--secondary);
  background: transparent;
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0 !important;
  justify-content: end;
  font-weight: 300;
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  border: none !important;
  background: transparent;
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
  background: transparent;
  color: var(--secondary);
  opacity: 1;
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--secondary);
}
.mobile-menu.mean-container .mean-nav ul li:hover > a:not(.mean-expand),
.mobile-menu.mean-container .mean-nav ul li:focus-within > a:not(.mean-expand) {
  color: var(--secondary);
  background: transparent;
}
.mobile-menu.mean-container .mean-nav ul li.submenu-open > a:not(.mean-expand) {
  background: var(--primary);
  color: var(--white);
}
.mobile-menu.mean-container .mean-nav ul li.submenu-open > a.mean-expand {
  color: var(--white);
}
.mobile-menu.mean-container .mean-nav ul li.active > a:not(.mean-expand),
.mobile-menu.mean-container .mean-nav ul li.current-menu-item > a:not(.mean-expand),
.mobile-menu.mean-container .mean-nav ul li > a:not(.mean-expand).active,
.mobile-menu.mean-container .mean-nav ul li > a:not(.mean-expand)[aria-current=page] {
  background: var(--primary);
  color: var(--white) !important;
}
.mobile-menu.mean-container .mean-nav ul li.active > a.mean-expand,
.mobile-menu.mean-container .mean-nav ul li.current-menu-item > a.mean-expand {
  color: var(--white) !important;
}
.mobile-menu.mean-container .mean-nav ul li > a:not(.mean-expand):is(:hover, :focus-visible) {
  color: var(--secondary);
}
.mobile-menu.mean-container .mean-nav ul li.active > a:not(.mean-expand):is(:hover, :focus-visible),
.mobile-menu.mean-container .mean-nav ul li.current-menu-item > a:not(.mean-expand):is(:hover, :focus-visible),
.mobile-menu.mean-container .mean-nav ul li.submenu-open > a:not(.mean-expand):is(:hover, :focus-visible) {
  color: var(--white) !important;
}
.mobile-menu.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--border);
}
.mobile-menu.mean-container .mean-nav ul li li a {
  font-size: 16px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 15px;
}
.mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}
@media only screen and (max-width: 991px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.mobile-menu.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--border);
}
.mobile-menu.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}
.mobile-menu.mean-container .mean-bar {
  padding: 0;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}
.mobile-menu.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}
.mobile-menu.mean-container a.meanmenu-reveal {
  display: none !important;
}

/* body style  */
.body-page-inner {
  position: relative;
  z-index: 100;
  background-color: #FFFFFF;
}
.body-page-inner.dark .header-area-2 .side-toggle {
  background-color: #1D1C1C;
}
@media (min-width: 1650px) {
  .body-page-inner .container.large {
    max-width: 1650px;
    --container-max-widths: 1620px;
    --bs-gutter-x: 30px;
  }
}
.body-page-inner .header-area-2 .side-toggle {
  background-color: rgb(243, 243, 243);
}
.dark .body-page-inner .header-area-2 .side-toggle {
  background-color: #1D1C1C;
}
.body-page-inner .header-area-2__inner {
  border-bottom: 1px solid var(--border);
}

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

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

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

/* page title style  */
.page-title-wrapper {
  margin-top: 68px;
  margin-bottom: 28px;
}
@media only screen and (max-width: 991px) {
  .page-title-wrapper {
    margin-bottom: 10px;
  }
}
.page-title-wrapper .page-title {
  font-family: var(--font_thunder);
  font-size: 495px;
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 1919px) {
  .page-title-wrapper .page-title {
    font-size: 385px;
  }
}
@media only screen and (max-width: 1399px) {
  .page-title-wrapper .page-title {
    font-size: 325px;
  }
}
@media only screen and (max-width: 1199px) {
  .page-title-wrapper .page-title {
    font-size: 265px;
  }
}
@media only screen and (max-width: 991px) {
  .page-title-wrapper .page-title {
    font-size: 185px;
  }
}
@media only screen and (max-width: 767px) {
  .page-title-wrapper .page-title {
    font-size: 125px;
  }
}
@media (max-width: 575px) {
  .page-title-wrapper .page-title {
    font-size: 90px;
  }
}

/* =========================================================
BASE CUSTOM CURSOR SETUP
========================================================= */
html[data-cursor=c1],
html[data-cursor=c1] *,
html[data-cursor=c1] button,
html[data-cursor=c1] a,
html[data-cursor=c1] input,
html[data-cursor=c1] textarea,
html[data-cursor=c1] select {
  cursor: auto !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 999999999;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.custom-cursor img {
  width: 100%;
  height: 100%;
  display: block;
}
@media only screen and (max-width: 1399px) {
  .custom-cursor img {
    max-width: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .custom-cursor img {
    max-width: 40px;
  }
}

/*----------------------------------------*/
/* theme css  */
/*----------------------------------------*/
html {
  --container-max-widths: 1320px;
}
@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px;
  }
}
@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px;
  }
}
@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px;
  }
}
@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px;
  }
}

body {
  background-color: #F8F8F8;
  color: var(--secondary);
}

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

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

.anim-reveal {
  overflow: hidden;
}

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

.color-white {
  color: var(--white);
}
.color-black {
  color: var(--black);
}
.color-primary {
  color: var(--primary);
}
.color-secondary {
  color: var(--secondary);
}

.bg-white {
  background-color: var(--white);
}
.bg-black {
  background-color: var(--black);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-theme {
  background-color: var(--theme) !important;
}

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

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.header__area-6 {
  position: unset;
}

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

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

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

section {
  margin-bottom: -1px;
}

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

.dir-rtl {
  direction: rtl;
}

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

.show-light {
  display: none;
}

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

.admin-bar header,
.admin-bar .body-wrapper {
  margin-top: 32px;
}

.swiper,
.swiper-container {
  direction: ltr;
}

.border-e-0 {
  border-inline-end: 0 !important;
}

.border-s-0 {
  border-inline-start: 0 !important;
}

/* Preloader css */
.container-preloader {
  align-items: center;
  cursor: auto;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
}
.container-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.container-preloader .animation-preloader .spinner {
  animation: t-spinner 1s infinite linear;
  border-radius: 50%;
  height: 9em;
  width: 9em;
  border: 10px solid var(--primary);
  border-top-color: var(--white);
  margin: 0 auto 3.5em auto;
}
.dark .container-preloader .animation-preloader .spinner {
  border-top-color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .container-preloader .animation-preloader .spinner {
    height: 5em;
    width: 5em;
    border-width: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .spinner {
    margin: 0 auto 0.2em auto;
  }
}
.container-preloader .animation-preloader .txt-loading {
  font: bold 5em "Montserrat", sans-serif;
  text-align: center;
  user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters {
  color: var(--white);
  position: relative;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .txt-loading .characters {
    font-size: 50px;
  }
}
.container-preloader .animation-preloader .txt-loading .characters:before {
  color: var(--primary);
  content: attr(data-text);
  animation: t-characters 4s infinite;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
  transform: rotateY(-90deg);
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {
  animation-delay: 0.2s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
  animation-delay: 0.4s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
  animation-delay: 0.6s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
  animation-delay: 0.8s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
  animation-delay: 1s;
}
.container-preloader .loader-section {
  background-color: var(--white);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.dark .container-preloader .loader-section {
  background-color: var(--black);
}
.container-preloader .loader-section.section-left {
  left: 0;
}
.container-preloader .loader-section.section-right {
  right: 0;
}

.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}

/* scroll css */
.scroll__down {
  display: flex;
  gap: 20px;
  align-items: center;
}
.scroll__down p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--white);
}
.scroll__down span {
  width: 66px;
  height: 106px;
  border: 1px solid var(--black-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 89px;
}
.scroll__down span i {
  color: var(--white);
}
.scroll__down-wrapper {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1399px) {
  .scroll__down-wrapper {
    height: 380px;
  }
}
@media only screen and (max-width: 1199px) {
  .scroll__down-wrapper {
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll__down-wrapper {
    height: auto;
    padding: 40px 0;
  }
}
.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 0px;
  z-index: 9999;
  background: var(--white);
  border-radius: 100px;
  mix-blend-mode: exclusion;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.scroll-top.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

.go-top-writer {
  width: 105px;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  background-image: url(../imgs/writer/go-top.webp);
  background-position: right center;
  background-repeat: no-repeat;
  right: 16%;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 0.5s;
}
.go-top-writer:hover {
  color: var(--primary);
}
.go-top-writer.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .go-top-writer br {
    display: block;
  }
}

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

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

.progress-wrap::after {
  position: absolute;
  content: "↑";
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: var(--primary);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
  border-radius: 50px;
}
.dark .progress-wrap::after {
  color: var(--black);
}

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

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

.light .scroll__down p {
  color: var(--black);
}
.light .scroll__down span {
  border-color: var(--white-3);
}
.light .scroll__down span i {
  color: var(--black);
}
.light.go-top-writer {
  color: var(--black);
  background-color: transparent;
  background-image: url(../imgs/writer/go-top-light.webp);
}
.light.progress-wrap {
  margin: 0;
  background-color: transparent;
}
.light.progress-wrap svg path {
  fill: var(--black);
}
.light.progress-wrap::after {
  color: var(--white);
}

/*----------------------------------------*/
/* button css  */
/*----------------------------------------*/
.rr-btn-group {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font_dmsans);
}
.rr-btn-group.btn-whte .b {
  border: 1px solid white;
  color: var(--white);
}
.rr-btn-group.btn-whte .c {
  border: 1px solid white;
  color: var(--white);
}

.rr-btn-group span {
  letter-spacing: 0;
}
.rr-btn-group:hover .b {
  transform: rotate(-20deg);
}
.rr-btn-group:hover .c {
  transform: translate(-7px, 0px);
}

.rr-btn-group .b {
  padding: 9px 25px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: 50px;
  transition: all 0.3s;
}

.rr-btn-group .c {
  padding: 9px 11px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: 50px;
  transition: all 0.3s;
}
.rr-btn-group .c i {
  rotate: -30deg;
}

.rr-btn {
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 5;
  padding: 26px 42px;
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
  border-radius: 100px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-transform: capitalize;
  letter-spacing: -0.02em;
}
.dark .rr-btn {
  color: var(--black);
}
@media only screen and (max-width: 1199px) {
  .rr-btn {
    padding: 18px 29px;
  }
}
.rr-btn:hover::before, .rr-btn:focus::before {
  height: 100%;
}
.rr-btn:hover .btn-wrap .text-one, .rr-btn:focus .btn-wrap .text-one {
  transform: translateY(-150%);
}
.rr-btn:hover .btn-wrap .text-two, .rr-btn:focus .btn-wrap .text-two {
  top: 50%;
  transform: translateY(-50%);
  color: var(--black);
}
.dark .rr-btn:hover .btn-wrap .text-two, .dark .rr-btn:focus .btn-wrap .text-two {
  color: var(--white);
}
.rr-btn:after {
  display: block;
  clear: both;
  content: "";
}
.rr-btn::before {
  background-color: var(--white);
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.5s;
}
.dark .rr-btn::before {
  background-color: var(--black);
}
.rr-btn .btn-wrap {
  z-index: 1;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border: none;
}
.rr-btn .btn-wrap .text-one,
.rr-btn .btn-wrap .text-two {
  display: flex;
  align-items: center;
}
.rr-btn .btn-wrap .text-one {
  position: relative;
  display: block;
  color: var(--white);
  transition: all 0.5s;
}
.dark .rr-btn .btn-wrap .text-one {
  color: var(--black);
}
.rr-btn .btn-wrap .text-two {
  position: absolute;
  top: 100%;
  display: block;
  color: var(--white);
  transition: all 0.5s;
}
.dark .rr-btn .btn-wrap .text-two {
  color: var(--black);
}
.rr-btn.btn-border {
  border: 1px solid rgba(17, 17, 17, 0.15);
  background-color: transparent;
  color: var(--primary);
  padding: 25px 42px;
}
.dark .rr-btn.btn-border {
  border-color: rgba(255, 255, 255, 0.15);
}
.rr-btn.btn-border:hover, .rr-btn.btn-border:focus {
  border-color: transparent;
  color: white;
}
.rr-btn.btn-border:hover .text-two, .rr-btn.btn-border:focus .text-two {
  color: #F9F9F9;
}
.rr-btn.btn-border .btn-wrap .text-one {
  color: var(--primary);
}
.rr-btn.btn-border .btn-wrap .text-two {
  color: var(--white);
}
.rr-btn.btn-border-white {
  border: 1px solid rgba(255, 255, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.02);
}
.rr-btn.hover-bg-theme {
  border-width: 0;
}
.rr-btn.hover-bg-theme:hover .btn-wrap .text-two, .rr-btn.hover-bg-theme:focus .btn-wrap .text-two {
  color: var(--white);
}
.rr-btn.hover-bg-theme::before {
  background-color: var(--theme);
}
.rr-btn.hover-bg-theme.btn-border {
  border-width: 1px;
}

.rr-btn-underline {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--primary);
  text-transform: uppercase;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  white-space: nowrap;
}
.rr-btn-underline:hover::before {
  width: 0;
}
.rr-btn-underline::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: 0.3s;
}
.rr-btn-underline i {
  font-size: 10px;
}

.rr-hover-btn-wrapper {
  display: inline-block;
}

.rr-btn-circle {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid rgba(17, 17, 17, 0.2);
  z-index: 1;
}
.dark .rr-btn-circle {
  border-color: rgba(255, 255, 255, 0.2);
}

.rr-btn-circle:hover {
  color: var(--white);
  border-color: transparent;
}
.dark .rr-btn-circle:hover {
  color: var(--black);
}

.rr-btn-circle:hover .rr-btn-circle-dot {
  width: 400px;
  height: 400px;
}

.rr-btn-circle-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: var(--primary);
  line-height: 20px;
  border-radius: 50%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* button animation css */
@keyframes mask_animation {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes mask_animation_2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.btn-hover-default {
  transition: all 0.5s;
}
.btn-hover-default:hover {
  color: var(--black);
  background-color: var(--white);
}
.btn-hover-cross {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cross::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cross:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-hover-cross:hover::after {
  height: 120%;
  opacity: 1;
}
.btn-hover-divide {
  overflow: hidden;
  position: relative;
  transition: all 1s;
  z-index: 1;
}
.btn-hover-divide::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-divide:hover {
  border-color: var(--primary);
  background-color: transparent !important;
  border-color: transparent;
}
.btn-hover-divide:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-cropping {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cropping::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cropping:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-hover-cropping:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-mask {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 5px;
  color: var(--white);
  font-weight: 400;
  font-size: 16px;
  border: 1px solid var(--white);
  z-index: 1;
}
.btn-hover-mask::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  position: absolute;
  content: attr(data-text);
  cursor: pointer;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--white);
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  mask-size: 2300% 100%;
  animation: mask_animation_2 0.7s steps(22) forwards;
}
.btn-hover-mask:hover {
  color: var(--white);
}
.btn-hover-mask:hover::after {
  animation: mask_animation 0.7s steps(22) forwards;
}
.btn-rollover-top {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:before {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-rollover-top:hover::before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
.btn-rollover-left {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-left::before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.btn-rollover-left:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-rollover-left:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}
.btn-rollover-cross {
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
}
.btn-rollover-cross::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 100%;
  opacity: 0;
  border-bottom: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  right: 100%;
  opacity: 0;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross:hover {
  border-color: transparent;
  color: var(--primary);
}
.btn-rollover-cross:hover::before {
  bottom: 0;
  left: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-rollover-cross:hover::after {
  top: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-parallal-border {
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
}
.btn-parallal-border::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  bottom: 0;
  left: 0;
  opacity: 0;
  border-bottom: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  border-radius: 5px;
  transition: all 0.75s;
}
.btn-parallal-border::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  top: 0;
  right: 0;
  opacity: 0;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: 5px;
  transition: all 0.75s;
}
.btn-parallal-border:hover {
  border-color: transparent;
  color: var(--primary);
}
.btn-parallal-border:hover::before {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-parallal-border:hover::after {
  opacity: 1;
  width: 100%;
  height: 100%;
}

/*----------------------------------------*/
/* menu css  */
/*----------------------------------------*/
.main-menu.menu-dark > ul > li > a {
  color: var(--black);
}
.main-menu.menu-light > ul > li > a {
  color: var(--white);
}
.main-menu > ul {
  display: flex;
}
.main-menu > ul > li:hover > a {
  color: var(--primary);
}
.main-menu > ul > li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 0;
}
.main-menu > ul > li:hover > ul.dp-menu li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 100%;
}
.main-menu li {
  position: relative;
}
.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  padding: 37px 15px;
  text-transform: capitalize;
}
.main-menu ul.dp-menu {
  background-color: #232529;
  padding: 18px 0px;
  width: 250px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu.col-2 {
  column-count: 2;
  width: 480px;
}
.main-menu ul.dp-menu ul {
  background: var(--black);
  padding: 18px 0px;
  width: 300px;
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 0;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}
.main-menu ul.dp-menu li:hover > a {
  color: var(--white);
  background-color: transparent;
}
.main-menu ul.dp-menu li:hover > ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}
.main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999999;
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}
.main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}
.main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}
.main-menu .has-mega-menu {
  position: static;
}
.main-menu li.menu-item-has-children > a:after {
  content: "▾";
  font-family: inherit;
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}
.main-menu .mega-menu {
  background-color: var(--black);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 50px;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-menu {
    column-gap: 30px;
  }
}
.main-menu .mega-menu li:has(ul) > a:after {
  content: "";
}
.main-menu .mega-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999999;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border-radius: 8px;
  overflow: hidden;
}
.main-menu .mega-menu li a:hover {
  color: var(--white);
  background: #2C2C2F;
}
.main-menu .mega-menu .title {
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  border-bottom: 1px solid #333337;
  padding-bottom: 20px;
  margin-bottom: 20px;
  pointer-events: none;
  border-radius: 0;
}
.main-menu .mega-style-2 {
  padding: 0 15%;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
}
.main-menu .mega-style-2 .title {
  height: 70px;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  padding-left: 30px;
}
.main-menu .mega-style-2 .title:after {
  position: absolute;
  content: "";
  width: 5000px;
  height: 1px;
  background-color: #333337;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
.main-menu .mega-style-2 > li:not(:first-child) {
  border-left: 1px solid #333337;
}
.main-menu .mega-style-2 ul {
  column-count: 2;
  position: relative;
  padding: 20px 0;
}
.main-menu .mega-style-2 ul:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 700px;
  background-color: #333337;
  top: 0;
  left: 50%;
  z-index: 1;
}
.main-menu .mega-style-2 ul li a {
  padding-left: 30px;
}
.main-menu .mega-style-3 {
  padding: 0 0 0 20px;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
}
.main-menu .mega-style-3 .title {
  height: 70px;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  padding-left: 30px;
}
.main-menu .mega-style-3 .title:after {
  position: absolute;
  content: "";
  width: 5000px;
  height: 1px;
  background-color: #333337;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
.main-menu .mega-style-3 > li:not(:first-child) {
  border-left: 1px solid #333337;
}
.main-menu .mega-style-3 > li:last-child {
  border: none;
  width: 36vw;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-style-3 > li:last-child {
    width: 32vw;
  }
}
.main-menu .mega-style-3 ul {
  column-count: 2;
  position: relative;
  padding: 20px 0;
  column-gap: 0;
}
.main-menu .mega-style-3 ul:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 700px;
  background-color: #333337;
  top: 0;
  left: 50%;
  z-index: 1;
}
.main-menu .mega-style-3 ul li {
  margin: 0 10px;
}
.main-menu .mega-style-3 ul li a {
  padding-left: 20px;
}
.main-menu .mega-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.main-menu .mega-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 60px;
}
.main-menu .list-3-column ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
}
@media only screen and (max-width: 1399px) {
  .main-menu .list-3-column ul {
    column-gap: 30px;
  }
}
.main-menu .span-first-item ul li:first-child {
  grid-column: 1/-1;
  column-span: all;
}
.main-menu .new {
  font-size: 10px;
  font-weight: 600;
  background: #FFA38E;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  border-radius: 2px;
  margin-inline-start: 8px;
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .main-menu-2 {
    display: none;
  }
}
.main-menu-2 li {
  display: inline-block;
  padding: 0 10px;
}
.main-menu-2 li a {
  display: block;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  padding: 10px;
  text-transform: capitalize;
}
.main-menu-2 li a:hover {
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .main-menu-2 li a {
    padding: 5px 0;
  }
}
.main-menu-3 li {
  display: inline-block;
  margin-right: 45px;
}
@media only screen and (max-width: 1199px) {
  .main-menu-3 li {
    margin-right: 25px;
  }
}
.main-menu-3 li:last-child {
  margin-right: 0;
}
.main-menu-3 li a {
  color: var(--white);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
.main-menu-3 li a:hover {
  color: var(--primary);
}
.main-menu-4 li {
  display: inline-block;
  margin-right: 50px;
}
.main-menu-4 li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  text-transform: uppercase;
}
.main-menu-4 li a:hover {
  color: var(--primary);
}

.mega-menu-thumb {
  width: 108%;
  aspect-ratio: 100/83;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@media only screen and (max-width: 1199px) {
  .mega-menu-thumb {
    width: 100%;
    height: 100%;
  }
}
.mega-menu-thumb:after {
  position: absolute;
  content: "";
  width: 76%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(270deg, rgba(28, 29, 32, 0) 0%, #1C1D20 100%);
}
.mega-menu-thumb .laptop-view {
  width: 70%;
  aspect-ratio: 100/114;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  right: 70px;
  bottom: 0;
}

.mega-menu-counter__item {
  text-align: center;
  display: inline-block;
  margin-top: 35%;
  margin-left: 17%;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .mega-menu-counter__item {
    margin: 30px auto 50px;
  }
}
.mega-menu-counter__text p {
  font-size: 30px;
  line-height: 28px;
  color: var(--white);
  font-weight: 500;
}
.mega-menu-counter__number {
  font-size: 150px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 24px;
  color: var(--white);
  background: linear-gradient(136deg, #9479FF 0%, #FFA6D6 47.92%, #FFFCE3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 1199px) {
  .menu-with-number {
    display: none;
  }
}
.menu-with-number li {
  display: inline-block;
}
.menu-with-number li a {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding: 34px 40px;
  display: inline-block;
  text-transform: uppercase;
}
.menu-with-number li a:hover span {
  color: var(--white);
}
.menu-with-number li a:hover span::before {
  background-color: var(--white);
}
.menu-with-number li a.active span {
  color: var(--white);
}
.menu-with-number li a.active span::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 1px;
  right: 20px;
  top: 50%;
  background-color: var(--white);
}
.menu-with-number li a span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 10px;
  text-align: right;
  color: #999999;
  position: relative;
  transition: all 0.5s;
}
.menu-with-number li a span::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 1px;
  right: 20px;
  top: 50%;
  transition: all 0.5s;
  background-color: var(--black-6);
}

.sidebar-menu li {
  display: block;
  padding-bottom: 15px;
}
@media only screen and (max-width: 1919px) {
  .sidebar-menu li {
    padding-bottom: 10px;
  }
}
.sidebar-menu li a {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding: 10px 0;
  text-transform: uppercase;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .sidebar-menu li a {
    padding: 5px 0;
  }
}

/* mean menu customize */
.offcanvas__menu-wrapper.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.offcanvas__menu-wrapper.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #FFA38E;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 15px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 54px;
  height: 54px;
  justify-content: center;
  font-weight: 300;
  border: none !important;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--secondary);
  opacity: 1;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 20px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 30px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}
@media only screen and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}
.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}
.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}

.light .main-menu li a:hover {
  color: var(--primary);
}
.light .main-menu-2 li a {
  color: var(--black);
}
.light .main-menu-2 li a:hover {
  color: var(--primary);
}
.light .main-menu-3 li a {
  color: var(--black);
}
.light .main-menu-3 li a:hover {
  color: var(--primary);
}
.light .sidebar-menu li a {
  color: var(--black);
}
.light .sidebar-menu li a:hover {
  color: var(--primary);
}
.light .menu-with-number li a {
  color: var(--black);
}
.light .menu-with-number li a:hover span {
  color: var(--black);
}
.light .menu-with-number li a:hover span::before {
  background-color: var(--black);
}
.light .menu-with-number li a span {
  color: var(--black-9);
}
.light .menu-with-number li a span::before {
  background-color: var(--black-9);
}
.light .menu-with-number li a.active span {
  color: var(--black);
}
.light .menu-with-number li a.active span::before {
  background-color: var(--black);
}

/*----------------------------------------*/
/* modal css  */
/*----------------------------------------*/
.modal__dialog {
  width: 760px;
  max-width: 100%;
  margin-top: 100px;
}
@media only screen and (max-width: 991px) {
  .modal__dialog {
    width: 700px;
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__dialog {
    width: 350px;
  }
}
.modal__content {
  height: 500px;
}
@media only screen and (max-width: 767px) {
  .modal__content {
    height: 300px;
  }
}
.modal__content iframe {
  width: 100%;
  height: 100%;
}
.modal__close {
  position: absolute;
  width: 40px;
  height: 40px;
  top: -15px;
  right: -15px;
  z-index: 9;
  border-radius: 50px;
  font-size: 20px;
  color: var(--white);
  background: var(--black);
  transition: all 0.3s;
}
.modal__close:hover {
  color: var(--primary);
}
.modal__sfluence {
  width: 100%;
  height: 100%;
  padding: 60px;
}
@media only screen and (max-width: 767px) {
  .modal__sfluence {
    padding: 20px 10px;
  }
}
.modal__sfluence-area {
  width: 100vw;
  height: 100vh;
  background: var(--black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  transform: scale(0.5);
}
.modal__sfluence-area.showed {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.modal__sfluence-area .close_btn {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0px;
  right: 20px;
  z-index: 9;
  border-radius: 50px;
  font-size: 30px;
  color: var(--white);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__sfluence-area .close_btn:hover {
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area .close_btn {
    right: 0;
  }
}
.modal__sfluence-area iframe,
.modal__sfluence-area video {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area iframe,
  .modal__sfluence-area video {
    height: 300px;
    object-fit: cover;
    margin-top: 45%;
  }
}

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

.cb-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  display: block;
  width: 80px;
  height: 30px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  -o-transition: opacity 0.1s, -o-transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out, opacity 0.1s, -moz-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.1s;
  transition: transform 0.3s ease-in-out, opacity 0.1s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
}

.cb-cursor-text {
  position: absolute;
  top: -28px;
  left: -4px;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: scale(0) rotate(10deg);
  -moz-transform: scale(0) rotate(10deg);
  -ms-transform: scale(0) rotate(10deg);
  -o-transform: scale(0) rotate(10deg);
  transform: scale(0) rotate(10deg);
  opacity: 0;
  color: black;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.3s;
  transition: opacity 0.4s, -webkit-transform 0.3s;
  -o-transition: opacity 0.4s, -o-transform 0.3s;
  -moz-transition: opacity 0.4s, transform 0.3s, -moz-transform 0.3s;
  transition: opacity 0.4s, transform 0.3s;
  transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: exclusion;
  }
}
@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: white;
  }
}
.cb-cursor.-normal,
.cb-cursor.-text {
  mix-blend-mode: normal;
}

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

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

.cb-cursor.-visible:before {
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}

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

.cb-cursor.-pointer:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.cb-cursor.-text:before {
  background: #fff;
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
}

.cb-cursor.-text .cb-cursor-text {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

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

.cb-cursor.-opaque:before {
  -webkit-transform: scale(1.32);
  -moz-transform: scale(1.32);
  -ms-transform: scale(1.32);
  -o-transform: scale(1.32);
  transform: scale(1.32);
}

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

.cb-cursor.-lg:before {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.cb-cursor.-hidden:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.-color-red {
  color: red;
}

.-color-green {
  color: #51c67d;
}

.cb-demo {
  background: #fff;
}

.cb-demo-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.cb-demo-container {
  padding: 0 20px;
}

@media (min-width: 1600px) {
  .cb-demo-container {
    padding: 0 120px;
  }
}
.cb-demo-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: 30px 0;
}

@media (min-width: 1600px) {
  .cb-demo-row {
    margin: 60px 0;
  }
}
.cb-demo-item {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 50px 30px;
  margin: 0 20px;
  color: #000;
}

@media (min-width: 1600px) {
  .cb-demo-item {
    padding: 90px 30px;
    margin: 0 30px;
  }
}
.cb-demo-item-title {
  position: relative;
  margin: 0 0 25px 0;
  font-size: 30px;
  font-weight: bold;
}

.cb-demo-item-text {
  position: relative;
  max-width: 70%;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
}

.cb-demo-item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #f8f8f8;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s, -moz-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s;
}

.cb-cursor.-green {
  color: green;
}

.cb-cursor.-green:before {
  background: green;
}

.cb-cursor.-red .cb-cursor-text {
  color: black;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  text-transform: uppercase;
}

.cb-cursor.-red {
  color: black;
  background-color: black;
  width: 5px;
  height: 5px;
}

.cb-cursor.-red:before {
  border-radius: 500px;
  background: white;
  width: 100px;
  height: 100px;
  color: #fff;
}

.cb-cursor.-portfolio:before {
  display: none;
}
.cb-cursor.-portfolio .cb-cursor-text {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  display: block;
  text-align: start;
}
.cb-cursor.-portfolio .content {
  position: absolute;
  top: 0px;
  left: 0px;
}
.cb-cursor.-portfolio .title {
  font-weight: 300;
  font-size: 30px;
  line-height: 27px;
  background-color: var(--white);
  padding: 15px 20px 13px;
  color: var(--black);
}
.cb-cursor.-portfolio .meta {
  font-family: var(--font_tartuffotrial);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 27px;
  background-color: var(--white);
  display: inline-block;
  padding: 5px 15px 3px;
  margin-top: 3px;
  color: var(--black);
}

/* digital agency page css */
.body-digital-agency {
  background-color: #F8F8F8;
  color: var(--secondary);
}
.body-digital-agency.dark {
  background-color: #111111;
}
@media (min-width: 1800px) {
  .body-digital-agency .container.large {
    max-width: 1750px;
  }
}
.body-digital-agency .section-header {
  margin-top: 20px;
}
.body-digital-agency .section-subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 1px;
}

/* hero area style  */
.hero-area {
  background-color: rgba(255, 129, 58, 0.15);
  position: relative;
  z-index: 2;
}
.dark .hero-area {
  background-color: #171717;
}
.hero-area .hero-content {
  display: grid;
  gap: 40px 100px;
  grid-template-columns: 130px 1fr 560px;
  margin-top: 61px;
  margin-bottom: 220px;
}
@media only screen and (max-width: 1919px) {
  .hero-area .hero-content {
    grid-template-columns: 130px 1fr 490px;
    margin-bottom: 140px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .hero-content {
    grid-template-columns: 130px 1fr 460px;
    gap: 40px 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area .hero-content {
    grid-template-columns: 130px 1fr;
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area .hero-content {
    margin-top: 31px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area .hero-content {
    grid-template-columns: 1fr;
  }
}
.hero-area .section-title {
  font-size: 100px;
  font-weight: 500;
  line-height: 0.9;
  max-width: 660px;
}
@media only screen and (max-width: 1919px) {
  .hero-area .section-title {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .section-title {
    font-size: 50px;
    max-width: 340px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-title {
    max-width: 590px;
  }
}
.hero-area .section-title .title-shape-1 {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -8px;
  width: 100px;
  display: inline-flex;
}
@media only screen and (max-width: 1919px) {
  .hero-area .section-title .title-shape-1 {
    width: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .section-title .title-shape-1 {
    width: 55px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-title .title-shape-1 {
    width: 45px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: -2px;
  }
}
.hero-area .feature-box .number {
  font-size: 100px;
  font-weight: 400;
  line-height: 0.72;
  display: inline-block;
  color: var(--primary);
}
@media only screen and (max-width: 1919px) {
  .hero-area .feature-box .number {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .feature-box .number {
    font-size: 50px;
  }
}
.hero-area .feature-box .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  color: var(--primary);
  margin-top: 21px;
}
.hero-area .text-wrapper {
  margin-top: 87px;
}
@media only screen and (max-width: 1919px) {
  .hero-area .text-wrapper {
    margin-top: 37px;
  }
}
.hero-area .text-wrapper .text {
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: var(--primary);
  max-width: 490px;
}
@media only screen and (max-width: 1399px) {
  .hero-area .text-wrapper .text {
    font-size: 18px;
  }
}
.hero-area .award-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
}
@media only screen and (max-width: 1199px) {
  .hero-area .award-wrapper {
    grid-row: span 2;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area .award-wrapper {
    order: 3;
  }
}
.hero-area .award-wrapper:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border);
  top: 0;
  left: calc(50% - 2px);
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .hero-area .award-wrapper:before {
    display: none;
  }
}
.hero-area .award-wrapper:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border);
  top: 0;
  left: calc(50% + 1px);
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .hero-area .award-wrapper:after {
    display: none;
  }
}
.hero-area .award-wrapper .circle-text-wrapper {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #F9E6DC;
}
.dark .hero-area .award-wrapper .circle-text-wrapper {
  background-color: var(--bg);
}
.hero-area .award-wrapper .circle-text {
  width: 130px;
  height: 130px;
  padding: 0;
}
.hero-area .features-wrapper-box {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.hero-area .features-wrapper {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: repeat(2, 230px);
  justify-content: space-between;
}
@media only screen and (max-width: 1919px) {
  .hero-area .features-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .hero-area .features-wrapper {
    grid-template-columns: repeat(1, 100%);
  }
}
.hero-area .section-content {
  margin-top: 10px;
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content {
    max-width: 600px;
  }
}
.hero-area .big-text {
  font-family: var(--font_thunder);
  font-size: 920px;
  font-weight: 700;
  line-height: 0.477;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--theme);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1919px) {
  .hero-area .big-text {
    font-size: 690px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .big-text {
    font-size: 590px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area .big-text {
    display: none;
  }
}

video.video-area {
  width: 100%;
}

/* about area style  */
.about-area {
  position: relative;
}
.about-area .pin-spacer {
  z-index: 1;
}
.about-area-inner {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-area .section-title {
  font-family: var(--font_thunder);
  font-size: 120px;
  font-weight: 700;
  line-height: 0.83;
  text-transform: uppercase;
  display: inline;
  position: relative;
}
@media only screen and (max-width: 1399px) {
  .about-area .section-title {
    font-size: 80px;
  }
}
.about-area .section-content {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.about-area .section-content .shape-1 {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-left: 1px solid var(--primary);
  border-top: 1px solid var(--primary);
  top: 0;
  left: 0;
}
.about-area .section-content .shape-2 {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-right: 1px solid var(--primary);
  border-top: 1px solid var(--primary);
  top: 0;
  right: 0;
}
.about-area .section-content .shape-3 {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-left: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  bottom: 0;
  left: 0;
}
.about-area .section-content .shape-4 {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-right: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  bottom: 0;
  right: 0;
}
.about-area .section-content .text {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  max-width: 950px;
  color: var(--primary);
  margin-inline: auto;
}
@media only screen and (max-width: 1399px) {
  .about-area .section-content .text {
    font-size: 24px;
    max-width: 800px;
  }
}
@media only screen and (max-width: 767px) {
  .about-area .section-content .text {
    font-size: 20px;
  }
}
.about-area .section-content .text-wrapper {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.5s, opacity 0.5s;
}
@media only screen and (max-width: 1199px) {
  .about-area .section-content .text-wrapper {
    opacity: 1;
    transform: translateY(0);
  }
}
.about-area .section-content .btn-wrapper {
  margin-top: 62px;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.5s, opacity 0.5s;
}
@media only screen and (max-width: 1199px) {
  .about-area .section-content .btn-wrapper {
    opacity: 1;
    margin-top: 50px;
    transform: translateY(0);
  }
}
.about-area .section-title-wrapper {
  display: none;
}
@media only screen and (max-width: 1199px) {
  .about-area .section-title-wrapper {
    display: block;
    margin-bottom: 20px;
  }
}

/* work area style  */
.work-area-inner {
  margin-top: 18px;
}
.work-area .section-header {
  display: grid;
  gap: 15px 20px;
  grid-template-columns: 1fr 2fr 1fr;
}
@media only screen and (max-width: 767px) {
  .work-area .section-header {
    grid-template-columns: 1fr;
  }
}
.work-area .section-header .text-wrapper {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .work-area .section-header .text-wrapper {
    text-align: start;
  }
}
.work-area .section-header .text-wrapper .text {
  font-family: var(--font_dmsans);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 18px;
  color: var(--primary);
}
.work-area .section-header .total-count {
  text-align: end;
}
@media only screen and (max-width: 767px) {
  .work-area .section-header .total-count {
    text-align: start;
  }
}
.work-area .section-header .total-count .number {
  display: inline-block;
  font-family: var(--font_dmsans);
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: var(--primary);
}
.work-area .section-title {
  font-family: var(--font_dmsans);
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}
.work-area .works-wrapper-box {
  margin-top: 67px;
}
@media only screen and (max-width: 1199px) {
  .work-area .works-wrapper-box {
    margin-top: 47px;
  }
}
.work-area .all-btn-wrapper {
  margin-top: 70px;
  text-align: center;
}
@media only screen and (max-width: 1199px) {
  .work-area .all-btn-wrapper {
    margin-top: 50px;
  }
}

.works-wrapper-1 {
  display: grid;
  gap: 60px 40px;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-1 {
    gap: 40px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .works-wrapper-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.works-wrapper-1 > * .image {
  transform-origin: bottom right;
}
.works-wrapper-1 > *:nth-child(2n) .image {
  transform-origin: bottom left;
}
.works-wrapper-1 .work-box .thumb:hover .t-btn {
  opacity: 1;
}
.works-wrapper-1 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  transform: scale(0.9);
}
.works-wrapper-1 .work-box .thumb .image img {
  transform-origin: center;
}
.works-wrapper-1 .work-box .thumb img {
  width: 100%;
  cursor: auto;
}
.works-wrapper-1 .work-box .thumb .t-btn {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  padding: 10px 20px;
  display: inline-block;
  background-color: white;
  color: var(--black);
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin: -25px 0 0 -65px;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.works-wrapper-1 .work-box .content {
  margin-top: 13px;
}
.works-wrapper-1 .work-box .title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-1 .work-box .title {
    font-size: 20px;
  }
}
.works-wrapper-1 .work-box .meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.works-wrapper-1 .work-box .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #999999;
  display: flex;
  align-items: center;
}
.works-wrapper-1 .work-box .meta span:not(:first-child):before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--primary);
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 4px;
}

/* service area style  */
.service-area .services-wrapper-box {
  margin-top: 91px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 1919px) {
  .service-area .services-wrapper-box {
    margin-top: 71px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area .services-wrapper-box {
    margin-top: 61px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-area .services-wrapper-box {
    margin-top: 41px;
  }
}

.services-wrapper-1 .service-box {
  border-top: 1px solid var(--border);
  padding-top: 30px;
  padding-bottom: 30px;
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 1fr 410px 545px;
  align-items: flex-start;
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr 310px 445px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr 220px 360px;
  }
}
@media only screen and (max-width: 767px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr 380px;
  }
}
@media (max-width: 575px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr;
  }
}
.services-wrapper-1 .service-box .count .number {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-1 .service-box .count .number {
    font-size: 25px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box .count .number {
    font-size: 20px;
  }
}
.services-wrapper-1 .service-box .content .title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
}
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box .content .title {
    font-size: 24px;
  }
}
.services-wrapper-1 .service-box .content .title a:hover {
  color: var(--secondary);
}
.services-wrapper-1 .service-box .service-list {
  margin-top: 22px;
}
.services-wrapper-1 .service-box .service-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--primary);
}
.services-wrapper-1 .service-box .service-list li a:hover {
  color: var(--secondary);
}
.services-wrapper-1 .service-box .thumb {
  border-radius: 20px;
  overflow: hidden;
  text-align: right;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box .thumb {
    border-radius: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .services-wrapper-1 .service-box .thumb {
    grid-column: span 2;
  }
}
@media (max-width: 575px) {
  .services-wrapper-1 .service-box .thumb {
    grid-column: auto;
  }
}
.services-wrapper-1 .service-box .thumb img {
  width: 35%;
  object-fit: cover;
  height: 265px;
  border-radius: 20px;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box .thumb img {
    width: 100%;
    border-radius: 10px;
  }
}

/* funfact area style  */
.funfact-area {
  background-color: var(--bg);
}
.funfact-area .section-title {
  color: var(--white);
}
.funfact-area .section-title-wrapper {
  margin-top: 41px;
}
.funfact-area .funfact-area-inner {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 950px;
}
@media only screen and (max-width: 1919px) {
  .funfact-area .funfact-area-inner {
    grid-template-columns: 1fr 750px;
  }
}
@media only screen and (max-width: 1399px) {
  .funfact-area .funfact-area-inner {
    grid-template-columns: 1fr 650px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-area-inner {
    grid-template-columns: 1fr 550px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-area-inner {
    grid-template-columns: 1fr;
  }
}
.funfact-area .funfact-wrapper-box {
  padding-left: 30px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-wrapper-box {
    padding-left: 0;
    padding-top: 0;
  }
}
.funfact-area .funfact-wrapper-box .line-1 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  top: 0;
  left: 0;
  z-index: -1;
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-wrapper-box .line-1 {
    display: none;
  }
}
.funfact-area .funfact-wrapper-box .line-2 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  top: 0;
  left: 30px;
  z-index: -1;
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-wrapper-box .line-2 {
    display: none;
  }
}
.funfact-area .funfact-wrapper-box .line-3 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  top: 0;
  right: 390px;
  z-index: -1;
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-wrapper-box .line-3 {
    right: 320px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-wrapper-box .line-3 {
    display: none;
  }
}
.funfact-area .funfact-wrapper-box .line-4 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  top: 0;
  right: 360px;
  z-index: -1;
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-wrapper-box .line-4 {
    right: 290px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-wrapper-box .line-4 {
    display: none;
  }
}
.funfact-area .funfact-wrapper {
  margin-top: 52px;
  margin-bottom: 43px;
}
.funfact-area .funfact-item {
  max-width: 360px;
  opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-item {
    max-width: 290px;
  }
}
.funfact-area .funfact-item:not(:first-child) {
  margin-top: 195px;
}
@media only screen and (max-width: 1399px) {
  .funfact-area .funfact-item:not(:first-child) {
    margin-top: 155px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-item:not(:first-child) {
    margin-top: 115px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area .funfact-item:not(:first-child) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .funfact-area .funfact-item:not(:first-child) {
    margin-top: 50px;
  }
}
.funfact-area .funfact-item:nth-child(2n) {
  margin-left: auto;
}
@media (max-width: 575px) {
  .funfact-area .funfact-item:nth-child(2n) {
    margin-left: 0;
  }
}
.funfact-area .funfact-item .number {
  font-size: 130px;
  font-weight: 500;
  line-height: 0.7;
  display: inline-block;
  color: var(--white);
}
@media only screen and (max-width: 1399px) {
  .funfact-area .funfact-item .number {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area .funfact-item .number {
    font-size: 60px;
  }
}
.funfact-area .funfact-item .text {
  margin-top: 34px;
  color: #999999;
}
@media only screen and (max-width: 1399px) {
  .funfact-area .funfact-item .text {
    margin-top: 24px;
  }
}

/* client area style  */
.client-area .section-title {
  max-width: 1430px;
}
.client-area .section-title span {
  color: var(--theme);
}
.client-area .section-content {
  margin-top: 21px;
}
.client-area .section-content .text-wrapper {
  max-width: 505px;
  margin-top: 133px;
  margin-left: 545px;
}
@media only screen and (max-width: 1919px) {
  .client-area .section-content .text-wrapper {
    margin-top: 83px;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area .section-content .text-wrapper {
    margin-top: 63px;
    margin-left: 345px;
  }
}
@media only screen and (max-width: 991px) {
  .client-area .section-content .text-wrapper {
    margin-top: 43px;
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .client-area .section-content .text-wrapper {
    max-width: 100%;
    margin-top: 23px;
  }
}
.client-area .client-capsule-wrapper {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  margin-top: -200px;
  height: 633px;
}
@media only screen and (max-width: 1919px) {
  .client-area .client-capsule-wrapper {
    height: 533px;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area .client-capsule-wrapper {
    height: 483px;
  }
}
@media only screen and (max-width: 991px) {
  .client-area .client-capsule-wrapper {
    height: 433px;
  }
}
.client-area .client-capsule-wrapper > * {
  position: absolute;
  display: inline-block;
  margin-bottom: 0;
  left: 0;
  top: 0;
  user-select: none;
  pointer-events: auto;
  transition: none;
}
.client-area .client-box {
  width: 215px;
  height: 100px;
  padding: 10px 20px;
  background-color: var(--primary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  transform: translate(-50%, -50%) rotate(0rad);
}
@media only screen and (max-width: 1919px) {
  .client-area .client-box {
    width: 165px;
    height: 70px;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area .client-box {
    width: 135px;
    height: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .client-area .client-box {
    width: 105px;
    height: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .client-area .client-box {
    width: 85px;
    height: 30px;
  }
}
.client-area .client-box img {
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
}
.client-area .line {
  border-bottom: 1px solid var(--primary);
}
.client-area .lines-wrapper {
  display: grid;
  gap: 5px 0;
}
@media only screen and (max-width: 1399px) {
  .client-area .lines-wrapper {
    gap: 3px 0;
  }
}
@media only screen and (max-width: 767px) {
  .client-area .lines-wrapper {
    gap: 1px 0;
  }
}

/* cta area style  */
.cta-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.cta-area-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.cta-area-inner .area-bg {
  position: absolute;
  height: 390px;
  width: 390px;
  background-color: var(--black);
  border-radius: 100%;
  z-index: -1;
}
.dark .cta-area-inner .area-bg {
  background-color: var(--theme);
}
@media only screen and (max-width: 1919px) {
  .cta-area-inner .area-bg {
    height: 300px;
    width: 300px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-inner .area-bg {
    height: 260px;
    width: 260px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-inner .area-bg {
    height: 200px;
    width: 200px;
  }
}
@media only screen and (max-width: 991px) {
  .cta-area-inner .area-bg {
    height: 160px;
    width: 160px;
  }
}
.cta-area .section-title {
  font-family: var(--font_thunder);
  font-size: 360px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--white);
  display: inline-block;
  font-size: 4vw;
}
.cta-area .section-title a:hover {
  color: var(--white);
}
.cta-area .section-content {
  text-align: center;
}

/* productivity area style  */
.productivity-area .section-content {
  margin-top: 148px;
  margin-bottom: 105px;
  text-align: center;
}
@media only screen and (max-width: 1919px) {
  .productivity-area .section-content {
    margin-top: 108px;
    margin-bottom: 75px;
  }
}
@media only screen and (max-width: 991px) {
  .productivity-area .section-content {
    margin-top: 58px;
    margin-bottom: 55px;
  }
}
.productivity-area .section-title {
  max-width: 1140px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .productivity-area .section-title {
    max-width: 937px;
  }
}
@media only screen and (max-width: 1399px) {
  .productivity-area .section-title {
    max-width: 737px;
  }
}
@media only screen and (max-width: 1199px) {
  .productivity-area .section-title {
    max-width: 637px;
  }
}
@media only screen and (max-width: 991px) {
  .productivity-area .section-title {
    max-width: 527px;
  }
}
.productivity-area .section-title span {
  color: #999999;
  display: inline-block;
}
.dark .productivity-area .section-title span {
  color: #555555;
}
.productivity-area .section-title .shape-1:hover:before {
  opacity: 1;
  visibility: visible;
}
.productivity-area .section-title .shape-1:before {
  content: "";
  width: 150px;
  aspect-ratio: 100/100;
  background-image: url(../imgs/shape/shape-5.webp);
  background-size: contain;
  position: absolute;
  top: -141px;
  right: 144px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s;
  display: inline-block;
}
@media only screen and (max-width: 1919px) {
  .productivity-area .section-title .shape-1:before {
    width: 100px;
  }
}
@media only screen and (max-width: 1399px) {
  .productivity-area .section-title .shape-1:before {
    width: 90px;
  }
}
@media only screen and (max-width: 1199px) {
  .productivity-area .section-title .shape-1:before {
    width: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .productivity-area .section-title .shape-1:before {
    top: -91px;
  }
}
.productivity-area .section-title .shape-2:hover:before {
  opacity: 1;
  visibility: visible;
}
.productivity-area .section-title .shape-2:before {
  content: "";
  width: 150px;
  aspect-ratio: 100/100;
  background-image: url(../imgs/shape/shape-4.webp);
  background-size: contain;
  position: absolute;
  top: 21px;
  left: -117px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s;
  display: inline-block;
}
@media only screen and (max-width: 1919px) {
  .productivity-area .section-title .shape-2:before {
    width: 100px;
  }
}
@media only screen and (max-width: 1399px) {
  .productivity-area .section-title .shape-2:before {
    width: 90px;
  }
}
@media only screen and (max-width: 1199px) {
  .productivity-area .section-title .shape-2:before {
    width: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .productivity-area .section-title .shape-2:before {
    left: -67px;
  }
}
.productivity-area .section-title .shape-3:hover:before {
  opacity: 1;
  visibility: visible;
}
.productivity-area .section-title .shape-3:before {
  content: "";
  width: 150px;
  aspect-ratio: 100/100;
  background-image: url(../imgs/shape/shape-6.webp);
  background-size: contain;
  position: absolute;
  bottom: -177px;
  left: 523px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s;
  display: inline-block;
}
@media only screen and (max-width: 1919px) {
  .productivity-area .section-title .shape-3:before {
    width: 100px;
    bottom: -137px;
  }
}
@media only screen and (max-width: 1399px) {
  .productivity-area .section-title .shape-3:before {
    width: 90px;
    bottom: -107px;
  }
}
@media only screen and (max-width: 1199px) {
  .productivity-area .section-title .shape-3:before {
    width: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .productivity-area .section-title .shape-3:before {
    left: 473px;
    bottom: -57px;
  }
}

/* text slider area style  */
.text-slider-active .swiper-slide {
  width: auto;
}

.text-slider {
  padding-top: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--border);
}
@media only screen and (max-width: 1199px) {
  .text-slider {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .text-slider {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.text-slider .swiper-wrapper {
  transition-timing-function: linear !important;
}

.text-slider-box {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

.text-slider-item .title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1919px) {
  .text-slider-item .title {
    font-size: 26px;
  }
}
@media only screen and (max-width: 1199px) {
  .text-slider-item .title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .text-slider-item .title {
    font-size: 20px;
  }
}
.text-slider-item .title .dot {
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 10px;
  margin-inline-end: 35px;
  display: inline-block;
}

/* design agency page css */
.body-design-agency.dark .section-title span {
  color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 1650px) {
  .body-design-agency .container.large {
    max-width: 1650px;
  }
}
.body-design-agency .section-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--primary);
}

.hero-area-4 {
  background: #C4F012;
}
.hero-area-4 .section-content {
  padding-top: 120px;
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content {
    padding-top: 30px;
  }
}
.hero-area-4 .section-content__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 110px;
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content__top {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content__top {
    padding-bottom: 45px;
  }
}
.hero-area-4 .section-content__top-left {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.hero-area-4 .section-content__list {
  position: relative;
  padding-top: 20px;
}
.hero-area-4 .section-content__list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 1px;
  background-color: var(--black);
}
.hero-area-4 .section-content__list li {
  color: var(--black);
  font-size: 18px;
  line-height: 22px;
}
.hero-area-4 .section-content__right {
  margin-right: 187px;
}
@media only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .hero-area-4 .section-content__right {
    margin-right: 0;
  }
}
.hero-area-4 .section-content__right .section-title {
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 70px;
  font-family: var(--font_thunder);
  text-transform: uppercase;
  letter-spacing: 0px;
  color: var(--black);
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content__right .section-title {
    font-size: 65px;
    line-height: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content__right .section-title {
    font-size: 50px;
    line-height: 50px;
  }
}
.hero-area-4 .section-content__right .section-title span {
  color: rgba(17, 17, 17, 0.5);
  font-style: italic;
  font-weight: 400;
}
.hero-area-4 .section-content__video img {
  max-width: 240px;
  height: 126px;
}
.hero-area-4 .section-content .title-wrapper {
  position: relative;
}
.hero-area-4 .section-content .title-wrapper .section-title {
  font-size: 350px;
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -8px;
  text-transform: uppercase;
  font-family: var(--font_thunder);
  color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 250px;
    letter-spacing: 0px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 220px;
    letter-spacing: 0px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 180px;
    letter-spacing: 0px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 140px;
    letter-spacing: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 100px;
    letter-spacing: 0px;
  }
}
@media (max-width: 575px) {
  .hero-area-4 .section-content .title-wrapper .section-title {
    font-size: 80px;
    letter-spacing: 0px;
  }
}
.hero-area-4 .section-content .title-wrapper .section-title .bg {
  width: 200px;
  height: 30px;
  margin: 0px -25px 0px -100px;
  display: inline-flex;
  background-color: var(--black);
}
@media only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .hero-area-4 .section-content .title-wrapper .section-title .bg {
    width: 150px;
    height: 22px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content .title-wrapper .section-title .bg {
    width: 90px;
    height: 15px;
    margin: 0px -15px 0px -70px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content .title-wrapper .section-title .bg {
    display: none;
  }
}
.hero-area-4 .section-content .title-wrapper .section-title sup {
  display: inline-flex;
  font-size: 30px;
  border: 4px solid;
  width: 37px;
  border-radius: 20px;
  height: 44px;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: -215px;
  left: -35px;
  padding-right: 6px;
  padding-top: 4px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-4 .section-content .title-wrapper .section-title sup {
    top: -140px;
    padding-right: 0;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-4 .section-content .title-wrapper .section-title sup {
    top: -122px;
    padding-right: 0;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content .title-wrapper .section-title sup {
    top: -98px;
    left: -30px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content .title-wrapper .section-title sup {
    top: -72px;
    left: -20px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content .title-wrapper .section-title sup {
    display: none;
  }
}
.hero-area-4 .section-content .title-wrapper .decisions {
  max-width: 330px;
  font-size: 20px;
  line-height: 30px;
  color: var(--black);
  position: absolute;
  bottom: 50px;
  right: 543px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-4 .section-content .title-wrapper .decisions {
    right: 400px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-4 .section-content .title-wrapper .decisions {
    right: 270px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-4 .section-content .title-wrapper .decisions {
    right: 190px;
    bottom: 25px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content .title-wrapper .decisions {
    position: inherit;
    right: 0;
    margin-top: 30px;
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content .title-wrapper .decisions {
    margin-top: 50px;
  }
}
.hero-area-4 .section-content__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content__bottom {
    flex-wrap: wrap;
    padding-top: 0px;
  }
}
.hero-area-4 .section-content__bottom .social-links {
  max-width: 266px;
}
@media only screen and (max-width: 767px) {
  .hero-area-4 .section-content__bottom .social-links {
    max-width: 100%;
    margin-bottom: 30px;
  }
}
.hero-area-4 .section-content__bottom .social-links li {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 16px;
}
.hero-area-4 .section-content__bottom .social-links li a {
  font-size: 18px;
  color: var(--black);
  position: relative;
}
.hero-area-4 .section-content__bottom .social-links li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: all 0.3s;
}
.hero-area-4 .section-content__bottom .social-links li a:hover::before {
  width: 0;
}
.hero-area-4 .section-content__thumb {
  margin-right: -144px;
  text-align: right;
}
@media only screen and (max-width: 991px) {
  .hero-area-4 .section-content__thumb {
    margin-right: -40px;
  }
}
@media (max-width: 575px) {
  .hero-area-4 .section-content__thumb {
    margin-right: 0;
  }
}

/* award area 2 style  */
.featured-work-area-2-inner .section-header {
  border-top: 1px solid var(--border);
  padding-top: 50px;
}
@media only screen and (max-width: 1199px) {
  .featured-work-area-2-inner .section-header {
    padding-top: 30px;
  }
}
.featured-work-area-2-inner .section-title {
  letter-spacing: 0;
  font-size: 80px;
  font-weight: 400;
}
@media only screen and (max-width: 1399px) {
  .featured-work-area-2-inner .section-title {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .featured-work-area-2-inner .section-title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-area-2-inner .section-title {
    font-size: 40px;
  }
  .featured-work-area-2-inner .section-title br {
    display: none;
  }
}
.featured-work-area-2-inner .title-wrapper {
  margin-top: 5px;
}
.featured-work-area-2-inner .section-title-wrapper {
  display: flex;
  gap: 30px;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .featured-work-area-2-inner .section-title-wrapper {
    flex-direction: column;
    margin-bottom: 40px;
    gap: 10px;
  }
}
.featured-work-area-2-inner .description {
  max-width: 442px;
  transform: translate(-130px, 100%);
  margin-top: 76px;
}
@media only screen and (max-width: 1399px) {
  .featured-work-area-2-inner .description {
    transform: translate(-50px, 100%);
  }
}
@media only screen and (max-width: 1199px) {
  .featured-work-area-2-inner .description {
    transform: translate(10px, 100%);
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-area-2-inner .description {
    transform: translate(-88px, 100%);
    max-width: 270px;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-work-area-2-inner .description {
    transform: translate(0px, 0%);
    max-width: 100%;
    margin-top: 0px;
  }
}
.featured-work-area-2-inner .description p {
  font-size: 30px;
  font-weight: 400;
  line-height: 38px;
}
@media only screen and (max-width: 1199px) {
  .featured-work-area-2-inner .description p {
    font-size: 25px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-area-2-inner .description p {
    font-size: 20px;
    line-height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-work-area-2-inner .description p {
    font-size: 18px;
    line-height: 25px;
  }
}

.featured-work-wrapper-2 {
  display: grid;
  gap: 295px;
  grid-template-columns: auto auto;
  justify-content: space-between;
}
@media only screen and (max-width: 1919px) {
  .featured-work-wrapper-2 {
    gap: 200px;
  }
}
@media only screen and (max-width: 1399px) {
  .featured-work-wrapper-2 {
    gap: 150px;
  }
}
@media only screen and (max-width: 1199px) {
  .featured-work-wrapper-2 {
    gap: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-wrapper-2 {
    gap: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-work-wrapper-2 {
    gap: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-work-wrapper-2 {
    grid-template-columns: auto;
  }
}
.featured-work-wrapper-2 > *:nth-child(3n+3) {
  grid-column: span 2;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .featured-work-wrapper-2 > *:nth-child(3n+3) {
    grid-column: auto;
  }
}
.featured-work-wrapper-2 > *:nth-child(3n+2) {
  margin-top: auto;
  margin-bottom: 8px;
}
.featured-work-wrapper-2 > *:nth-child(2) {
  margin-top: 357px;
}
@media only screen and (max-width: 1399px) {
  .featured-work-wrapper-2 > *:nth-child(2) {
    margin-top: 290px;
  }
}
@media only screen and (max-width: 1199px) {
  .featured-work-wrapper-2 > *:nth-child(2) {
    margin-top: 180px;
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-wrapper-2 > *:nth-child(2) {
    margin-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-work-wrapper-2 > *:nth-child(2) {
    margin-top: 0;
  }
}
.featured-work-wrapper-2 > *:nth-child(3) {
  max-width: 750px;
}
@media only screen and (max-width: 1399px), only screen and (max-width: 1919px) {
  .featured-work-wrapper-2 > *:nth-child(3) {
    max-width: 565px;
  }
}
@media only screen and (max-width: 1199px) {
  .featured-work-wrapper-2 > *:nth-child(3) {
    max-width: 435px;
  }
}
@media only screen and (max-width: 991px) {
  .featured-work-wrapper-2 > *:nth-child(3) {
    max-width: 358px;
  }
}
.featured-work-wrapper-2 .featured-work-box {
  width: 100%;
}
.featured-work-wrapper-2 .featured-work-box .content {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
@media only screen and (max-width: 991px) {
  .featured-work-wrapper-2 .featured-work-box .content {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.featured-work-wrapper-2 .featured-work-box .content .title {
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.6px;
  text-transform: uppercase;
}
.featured-work-wrapper-2 .featured-work-box .content .meta .tag {
  text-transform: uppercase;
  font-size: 14px;
}
.featured-work-wrapper-2 .featured-work-box .thumb {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  position: relative;
}
.featured-work-wrapper-2 .featured-work-box .thumb::before, .featured-work-wrapper-2 .featured-work-box .thumb::after {
  position: absolute;
  width: 0;
  height: 101%;
  content: "";
  top: -1px;
  transition: all 0.5s;
  background-color: var(--white);
}
.dark .featured-work-wrapper-2 .featured-work-box .thumb::before, .dark .featured-work-wrapper-2 .featured-work-box .thumb::after {
  background-color: var(--black);
}
.featured-work-wrapper-2 .featured-work-box .thumb::before {
  left: -1px;
}
.featured-work-wrapper-2 .featured-work-box .thumb::after {
  right: -1px;
}
.featured-work-wrapper-2 .featured-work-box .thumb span {
  display: block;
}
.featured-work-wrapper-2 .featured-work-box .thumb span::before, .featured-work-wrapper-2 .featured-work-box .thumb span::after {
  position: absolute;
  width: 101%;
  height: 0;
  content: "";
  left: -1px;
  transition: all 0.5s;
  background-color: var(--white);
}
.dark .featured-work-wrapper-2 .featured-work-box .thumb span::before, .dark .featured-work-wrapper-2 .featured-work-box .thumb span::after {
  background-color: var(--black);
}
.featured-work-wrapper-2 .featured-work-box .thumb span::before {
  top: -1px;
}
.featured-work-wrapper-2 .featured-work-box .thumb span::after {
  bottom: -1px;
}
.featured-work-wrapper-2 .featured-work-box .thumb img {
  width: 100%;
  height: 100%;
  cursor: auto;
  object-fit: cover;
}
.featured-work-wrapper-2 .featured-work-box .thumb:hover::before, .featured-work-wrapper-2 .featured-work-box .thumb:hover::after {
  width: 30px;
}
.featured-work-wrapper-2 .featured-work-box .thumb:hover span::before, .featured-work-wrapper-2 .featured-work-box .thumb:hover span::after {
  height: 30px;
}
.featured-work-wrapper-2 .content-wapper {
  margin-right: auto;
  text-align: left;
}
.featured-work-wrapper-2 .view-button .desc {
  margin-bottom: 90px;
  max-width: 365px;
  font-size: 20px;
}
@media only screen and (max-width: 1199px) {
  .featured-work-wrapper-2 .view-button .desc {
    max-width: 100%;
    margin-bottom: 50px;
  }
}

/* capabilities area style  */
.capabilities-area-inner {
  position: relative;
  padding-bottom: 136px;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area-inner {
    padding-bottom: 106px;
  }
}
@media only screen and (max-width: 1199px) {
  .capabilities-area-inner {
    padding-bottom: 86px;
  }
}
.capabilities-area-inner .pin-spacer {
  pointer-events: none;
}
.capabilities-area .section-content-wrapper {
  margin-top: 50px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 1235px;
  border-top: 1px solid var(--border);
  padding-top: 45px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area .section-content-wrapper {
    grid-template-columns: 1fr 950px;
  }
}
@media only screen and (max-width: 1399px) {
  .capabilities-area .section-content-wrapper {
    grid-template-columns: 1fr 800px;
  }
}
@media only screen and (max-width: 1199px) {
  .capabilities-area .section-content-wrapper {
    grid-template-columns: 1fr 600px;
  }
}
@media only screen and (max-width: 991px) {
  .capabilities-area .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}
.capabilities-area .section-content .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  max-width: 245px;
}
@media only screen and (max-width: 991px) {
  .capabilities-area .section-content .text {
    max-width: 545px;
  }
}
.capabilities-area .section-content .text-wrapper {
  margin-top: 63px;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area .section-content .text-wrapper {
    margin-top: 43px;
  }
}
@media only screen and (max-width: 1399px) {
  .capabilities-area .section-content .text-wrapper {
    margin-top: 23px;
  }
}
.capabilities-area .capability-wrapper-box {
  margin-top: 5px;
}
@media only screen and (max-width: 767px) {
  .capabilities-area .capability-wrapper {
    border-top: 1px solid var(--border);
  }
}
@media only screen and (max-width: 767px) {
  .capabilities-area .capability-box {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
.capabilities-area .capability-box-inner {
  display: grid;
  gap: 10px 60px;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .capabilities-area .capability-box-inner {
    grid-template-columns: 1fr;
  }
}
.capabilities-area .capability-box:hover .thumb img, .capabilities-area .capability-box.active .thumb img {
  opacity: 1;
  transform: scale(1);
}
.capabilities-area .capability-box .title {
  font-size: 100px;
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area .capability-box .title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .capabilities-area .capability-box .title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .capabilities-area .capability-box .title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .capabilities-area .capability-box .title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .capabilities-area .capability-box .title {
    font-size: 35px;
  }
}
.capabilities-area .capability-box .title.rr-btn-underline {
  padding-bottom: 0;
  color: rgba(17, 17, 17, 0.4);
}
.dark .capabilities-area .capability-box .title.rr-btn-underline {
  color: rgba(255, 255, 255, 0.4);
}
.capabilities-area .capability-box .title.rr-btn-underline::before {
  height: 5px;
  transition: 0.5s;
}
@media only screen and (max-width: 1399px) {
  .capabilities-area .capability-box .title.rr-btn-underline::before {
    height: 3px;
  }
}
@media only screen and (max-width: 991px) {
  .capabilities-area .capability-box .title.rr-btn-underline::before {
    height: 2px;
  }
}
.capabilities-area .capability-box .thumb {
  display: flex;
  gap: 15px;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area .capability-box .thumb {
    gap: 10px;
  }
}
.capabilities-area .capability-box .thumb img {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  object-fit: cover;
  opacity: 0;
  transform: scale(0);
  transform-origin: top right;
  transition: all 0.5s;
}
@media only screen and (max-width: 1919px) {
  .capabilities-area .capability-box .thumb img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }
}
@media only screen and (max-width: 1399px) {
  .capabilities-area .capability-box .thumb img {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .capabilities-area .capability-box .thumb img {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .capabilities-area .capability-box .thumb img {
    opacity: 1;
    transform: scale(1);
  }
}

/* client area 4 style  */
.client-area-4 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--white);
  z-index: 1;
  pointer-events: auto;
}
.dark .client-area-4 {
  background-color: var(--black);
}
.client-area-4-inner {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.client-area-4 .video-wrapper-box {
  display: flex;
  align-items: center;
}
.client-area-4 .video-wrapper-box .thumb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .client-area-4 .video-wrapper-box .thumb {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .client-area-4 .video-wrapper-box .thumb {
    width: 70px;
    height: 70px;
  }
}
.client-area-4 .video-wrapper-box .btn-circle {
  width: 90px;
  height: 90px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #C4F012;
  color: var(--black);
  border-radius: 50%;
  font-size: 26px;
  outline: 5px solid var(--white);
  margin-left: -15px;
}
.dark .client-area-4 .video-wrapper-box .btn-circle {
  outline-color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .client-area-4 .video-wrapper-box .btn-circle {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .client-area-4 .video-wrapper-box .btn-circle {
    width: 70px;
    height: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .client-area-4 .video-wrapper-box .btn-circle {
    margin-left: -35px;
  }
}
.client-area-4 .clients-wrapper-box {
  border-left: 1px solid var(--border);
  padding-left: 30px;
  margin-left: 30px;
  padding-top: 50px;
  padding-bottom: 50px;
}
@media only screen and (max-width: 1919px) {
  .client-area-4 .clients-wrapper-box {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}
@media only screen and (max-width: 1199px) {
  .client-area-4 .clients-wrapper-box {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .client-area-4 .clients-wrapper-box {
    padding-left: 20px;
    margin-left: 20px;
  }
}
.client-area-4 .clients-wrapper {
  align-items: center;
  animation: marquee-081a87f6 20s linear infinite;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}
@keyframes marquee-081a87f6 {
  to {
    transform: translate(-50%);
  }
}
.client-area-4 .client-box {
  margin-right: 80px;
}
@media only screen and (max-width: 1199px) {
  .client-area-4 .client-box {
    margin-right: 50px;
  }
}
.client-area-4 .client-box img {
  opacity: 0.3;
}
.dark .client-area-4 .client-box img {
  opacity: 1;
}

/* about area 3 style  */
.about-area-3 .section-content .text {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.26;
  max-width: 660px;
}
@media only screen and (max-width: 1919px) {
  .about-area-3 .section-content .text {
    font-size: 24px;
    max-width: 550px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-3 .section-content .text {
    font-size: 22px;
    max-width: 500px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-3 .section-content .text {
    font-size: 20px;
    max-width: 450px;
    line-height: 1.4;
  }
}
.about-area-3 .section-content .text-wrapper {
  margin-top: -124px;
  margin-left: 15%;
}
@media only screen and (max-width: 1399px) {
  .about-area-3 .section-content .text-wrapper {
    margin-top: -104px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-3 .section-content .text-wrapper {
    margin-top: -84px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-3 .section-content .text-wrapper {
    margin-top: -64px;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about-area-3 .section-content .text-wrapper {
    margin-top: 40px;
  }
}
.about-area-3 .section-content .btn-wrapper {
  margin-top: 61px;
  margin-left: 15%;
}
@media only screen and (max-width: 1919px) {
  .about-area-3 .section-content .btn-wrapper {
    margin-top: 41px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-3 .section-content .btn-wrapper {
    margin-left: 0;
  }
}
.about-area-3 .about-thumb {
  width: 100%;
  aspect-ratio: 100/74;
  position: relative;
  height: 100%;
}
.about-area-3 .about-thumb .thumb-1 {
  position: absolute;
  top: 11%;
  left: 0;
  width: 35%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 100/67;
  z-index: 1;
}
.about-area-3 .about-thumb .thumb-2 {
  position: absolute;
  top: 0;
  left: 30%;
  width: 39%;
  object-fit: cover;
  aspect-ratio: 100/142;
}
.about-area-3 .about-thumb .thumb-3 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  object-fit: cover;
  aspect-ratio: 100/136;
}
.about-area-3 .about-thumb .thumb-4 {
  position: absolute;
  bottom: 18%;
  left: 15%;
  width: 14%;
  object-fit: cover;
  aspect-ratio: 100/130;
}
@media only screen and (max-width: 991px) {
  .about-area-3 .about-thumb .thumb-4 {
    bottom: 28%;
  }
}

/* award area 2 style  */
.award-area-2 {
  background-color: var(--bg);
}
.award-area-2 .section-header {
  margin-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 45px;
}
.award-area-2 .section-subtitle {
  color: var(--white);
}
.award-area-2 .section-title {
  color: var(--white);
  max-width: 780px;
}
@media only screen and (max-width: 1919px) {
  .award-area-2 .section-title {
    max-width: 680px;
  }
}
@media only screen and (max-width: 1399px) {
  .award-area-2 .section-title {
    max-width: 480px;
  }
}
@media only screen and (max-width: 1199px) {
  .award-area-2 .section-title {
    max-width: 430px;
  }
}
@media only screen and (max-width: 991px) {
  .award-area-2 .section-title {
    max-width: 330px;
  }
}
.award-area-2 .section-title span {
  color: rgba(255, 255, 255, 0.4);
}
.award-area-2 .title-wrapper {
  margin-top: 5px;
}
.award-area-2 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}
@media only screen and (max-width: 1919px) {
  .award-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}
@media only screen and (max-width: 1399px) {
  .award-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}
@media only screen and (max-width: 1199px) {
  .award-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}
@media only screen and (max-width: 991px) {
  .award-area-2 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}
.award-area-2 .award-wrapper-box {
  max-width: 1235px;
  margin-left: auto;
  margin-top: 85px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1919px) {
  .award-area-2 .award-wrapper-box {
    max-width: 1000px;
    margin-top: 55px;
  }
}
@media only screen and (max-width: 1399px) {
  .award-area-2 .award-wrapper-box {
    max-width: 850px;
  }
}
@media only screen and (max-width: 1199px) {
  .award-area-2 .award-wrapper-box {
    max-width: 750px;
    margin-top: 45px;
  }
}
.award-area-2 .award-wrapper {
  border-top: 1px solid rgb(41, 41, 41);
}
.award-area-2 .award-box {
  border-bottom: 1px solid rgb(41, 41, 41);
  padding-top: 40px;
  padding-bottom: 40px;
  display: grid;
  gap: 20px 50px;
  grid-template-columns: 280px 1fr 100px;
  align-items: center;
  transition: all 0.5s;
}
@media only screen and (max-width: 1919px) {
  .award-area-2 .award-box {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .award-area-2 .award-box {
    grid-template-columns: 180px 1fr 100px;
  }
}
@media only screen and (max-width: 767px) {
  .award-area-2 .award-box {
    grid-template-columns: 1fr 1fr;
  }
}
.award-area-2 .award-box:hover {
  background-color: #171717;
}
.dark .award-area-2 .award-box:hover {
  background-color: #292828;
}
@media only screen and (max-width: 767px) {
  .award-area-2 .award-box:hover {
    background-color: transparent;
  }
}
.award-area-2 .award-box:hover .category {
  transform: translateX(30px);
}
@media only screen and (max-width: 767px) {
  .award-area-2 .award-box:hover .category {
    transform: translateX(0px);
  }
}
.award-area-2 .award-box:hover .year {
  transform: translateX(-30px);
}
@media only screen and (max-width: 767px) {
  .award-area-2 .award-box:hover .year {
    transform: translateX(0px);
  }
}
.award-area-2 .award-box .category {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: var(--white);
  transition: all 0.5s;
}
.award-area-2 .award-box .award {
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  color: var(--white);
}
@media only screen and (max-width: 1919px) {
  .award-area-2 .award-box .award {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .award-area-2 .award-box .award {
    order: 3;
    grid-column: span 2;
  }
}
.award-area-2 .award-box .year {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: var(--white);
  transition: all 0.5s;
  text-align: right;
}

/* service area 4 style  */
.service-area-4 {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.services-wrapper-4 {
  gap: 100px;
  width: fit-content;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 {
    display: grid;
    gap: 50px;
  }
}
.services-wrapper-4 .service-box {
  border-top: 1px solid var(--primary);
  width: 760px;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-box {
    width: 100%;
  }
}
.services-wrapper-4 .service-box .number {
  font-family: var(--font_thunder);
  font-size: 350px;
  font-weight: 400;
  line-height: 0.7;
  letter-spacing: -0.02em;
  display: inline-block;
  color: var(--primary);
  margin-top: 80px;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-4 .service-box .number {
    font-size: 200px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-4 .service-box .number {
    font-size: 180px;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-4 .service-box .number {
    font-size: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-box .number {
    font-size: 120px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-box .number {
    font-size: 100px;
  }
}
.services-wrapper-4 .service-box .title {
  font-family: var(--font_thunder);
  font-size: 100px;
  text-transform: uppercase;
  margin-top: 40px;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-4 .service-box .title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-4 .service-box .title {
    font-size: 60px;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-4 .service-box .title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-box .title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .services-wrapper-4 .service-box .title {
    font-size: 35px;
  }
}
.services-wrapper-4 .service-box .feature-list {
  border-top: 1px dashed #878482;
  margin-top: 34px;
}
.dark .services-wrapper-4 .service-box .feature-list {
  border-color: #6F6D6C;
}
.services-wrapper-4 .service-box .feature-list li {
  font-family: var(--font_thunder);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #878482;
  padding-top: 13px;
  padding-bottom: 8px;
}
.dark .services-wrapper-4 .service-box .feature-list li {
  border-color: #6F6D6C;
}
.services-wrapper-4 .service-box .feature-list li:before {
  content: "+";
  margin-right: 4px;
}
.services-wrapper-4 .service-thumb {
  width: 1920px;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-thumb {
    width: 100%;
    position: inherit;
  }
}
.services-wrapper-4 .service-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.services-wrapper-4 .service-thumb-line-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  rotate: 180deg;
}
@media only screen and (max-width: 991px) {
  .services-wrapper-4 .service-thumb-line-wrapper {
    display: none;
  }
}
.services-wrapper-4 .service-thumb-line-wrapper span {
  width: 70px;
  height: 1000px;
  background-color: var(--white);
  transform-origin: right center;
  margin-left: -1px;
}
.dark .services-wrapper-4 .service-thumb-line-wrapper span {
  background-color: var(--black);
}

/* creative agency page css */
.body-celvix-agency {
  position: relative;
  z-index: 100;
  background-color: #F3F3F3;
}
.body-celvix-agency.dark {
  --primary: #F3F3F3;
}
.body-celvix-agency.dark .rr-btn::before {
  background-color: var(--black);
}
.body-celvix-agency.dark .rr-btn.btn-border-white {
  border-color: rgba(17, 17, 17, 0.1);
}
.body-celvix-agency.dark .header-area-2 .side-toggle {
  background-color: #292828;
}
.body-celvix-agency .body-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.body-celvix-agency .body-bg .container.large {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.body-celvix-agency .body-bg img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  display: block;
}
@media (min-width: 1850px) {
  .body-celvix-agency .container.large {
    max-width: 1850px;
    --container-max-widths: 1820px;
  }
}
.body-celvix-agency .section-subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 1px;
}
@media (min-width: 1920px) {
  .body-celvix-agency .section-title {
    font-size: 110px;
  }
}
.body-celvix-agency .rr-btn::before {
  background-color: #F3F3F3;
}

/* hero area 2 style  */
.hero-area-2-inner {
  padding-top: 100px;
}
.hero-area-2 .section-title {
  font-size: 200px;
  font-weight: 310;
  line-height: 0.85;
  letter-spacing: -0.09em;
  text-transform: uppercase;
  margin-left: 60px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-title {
    font-size: 140px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-title {
    font-size: 120px;
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-2 .section-title {
    font-size: 100px;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-2 .section-title {
    font-size: 56px;
    line-height: 0.95;
  }
}
@media (max-width: 575px) {
  .hero-area-2 .section-title {
    font-size: 40px;
  }
}
.hero-area-2 .section-title .title-shape-1 {
  height: 143px;
  margin-left: 14px;
  margin-top: -35px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-title .title-shape-1 {
    height: 100px;
    margin-top: -25px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-title .title-shape-1 {
    height: 86px;
    margin-top: -23px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-2 .section-title .title-shape-1 {
    height: 70px;
    margin-top: -18px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-2 .section-title .title-shape-1 {
    display: none;
  }
}
.hero-area-2 .section-title .title-video {
  height: 150px;
  margin-right: 10px;
  margin-left: -60px;
  display: inline-block;
  margin-top: -40px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-title .title-video {
    height: 100px;
    margin-top: -25px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-title .title-video {
    height: 85px;
    margin-left: -30px;
    margin-top: -22px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-2 .section-title .title-video {
    height: 70px;
    margin-top: -18px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-2 .section-title .title-video {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-2 .section-title .title-video {
    display: none;
  }
}
.hero-area-2 .section-content {
  margin-top: -450px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-content {
    margin-top: -330px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-content {
    margin-top: -240px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-2 .section-content {
    margin-top: 30px;
  }
}
.hero-area-2 .section-content .text-wrapper {
  max-width: 565px;
  margin-left: auto;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-content .text-wrapper {
    max-width: 455px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-content .text-wrapper {
    max-width: 345px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-2 .section-content .text-wrapper {
    max-width: 100%;
  }
}
.hero-area-2 .section-content .info-text {
  font-family: var(--font_sequelsansromanbody);
  font-size: 18px;
  font-weight: 310;
  line-height: 20px;
  letter-spacing: -0.05em;
  max-width: 211px;
  color: var(--primary);
}
.hero-area-2 .section-content .info-text span {
  text-decoration: underline;
}
.hero-area-2 .section-content .about-text {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  margin-top: 474px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .section-content .about-text {
    font-size: 24px;
    margin-top: 304px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .section-content .about-text {
    margin-top: 204px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-2 .section-content .about-text {
    font-size: 22px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-2 .section-content .about-text {
    margin-top: 34px;
  }
}
.hero-area-2 .hero-thumb {
  max-width: 1290px;
  margin-top: 44px;
  margin-left: auto;
}
.hero-area-2 .hero-thumb img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1919px) {
  .hero-area-2 .hero-thumb {
    max-width: 990px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-2 .hero-thumb {
    max-width: 890px;
  }
}

/* about area 2 style  */
.about-area-2 {
  overflow-x: clip;
}
.about-area-2 .section-title {
  max-width: 1130px;
}
@media only screen and (max-width: 1919px) {
  .about-area-2 .section-title {
    max-width: 830px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-title {
    max-width: 630px;
  }
}
.about-area-2 .section-header {
  margin-top: 69px;
}
.about-area-2 .section-content {
  min-height: 300vh;
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content {
    min-height: auto;
  }
}
.about-area-2 .section-content .year-wrapper {
  position: relative;
  height: 355px;
}
@media only screen and (max-width: 1919px) {
  .about-area-2 .section-content .year-wrapper {
    height: 242px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .year-wrapper {
    height: 213px;
    height: auto;
  }
}
.about-area-2 .section-content .year-since {
  font-size: 500px;
  font-weight: 315;
  line-height: 0.71;
  letter-spacing: -0.1em;
  font-family: var(--font_sequelsansmediumbody);
  white-space: nowrap;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  opacity: 1;
}
@media only screen and (max-width: 1919px) {
  .about-area-2 .section-content .year-since {
    font-size: 340px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .year-since {
    font-size: 235px;
    text-align: left;
    position: relative;
    white-space: wrap;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-2 .section-content .year-since {
    font-size: 180px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-2 .section-content .year-since {
    font-size: 110px;
  }
}
@media only screen and (max-width: 767px) {
  .about-area-2 .section-content .year-since {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .about-area-2 .section-content .year-since {
    font-size: 60px;
  }
}
.about-area-2 .section-content .year-since .first-text {
  width: var(--container-max-widths);
  display: inline-block;
  text-align: right;
  padding-right: 40px;
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .year-since .first-text {
    text-align: left;
    padding-right: 0;
    width: auto;
  }
}
.about-area-2 .section-content .year-since .last-text {
  width: var(--container-max-widths);
  display: inline-block;
  text-align: center;
  position: relative;
  transform-origin: top center;
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .year-since .last-text {
    display: none;
  }
}
.about-area-2 .section-content .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  max-width: 515px;
}
.about-area-2 .section-content .text-wrapper {
  margin-top: 91px;
  max-width: 770px;
  margin-left: auto;
}
@media only screen and (max-width: 1919px) {
  .about-area-2 .section-content .text-wrapper {
    max-width: 570px;
    margin-top: 61px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .text-wrapper {
    max-width: 670px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-2 .section-content .text-wrapper {
    max-width: 550px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-2 .section-content .text-wrapper {
    max-width: 100%;
    margin-top: 41px;
  }
}
.about-area-2 .section-content .btn-wrapper {
  margin-top: 38px;
  max-width: 770px;
  margin-left: auto;
}
@media only screen and (max-width: 1919px) {
  .about-area-2 .section-content .btn-wrapper {
    max-width: 570px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-2 .section-content .btn-wrapper {
    max-width: 670px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-2 .section-content .btn-wrapper {
    max-width: 550px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-2 .section-content .btn-wrapper {
    max-width: 100%;
  }
}

/* work area 2 style  */
.work-area-2 {
  position: relative;
}
@media (min-width: 992px) {
  .work-area-2-inner {
    padding-top: 100px !important;
  }
}
.work-area-2 .works-wrapper-head {
  display: grid;
  gap: 10px 60px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 48px;
  align-items: flex-end;
}
@media only screen and (max-width: 1399px) {
  .work-area-2 .works-wrapper-head {
    margin-bottom: 28px;
  }
}
@media only screen and (max-width: 767px) {
  .work-area-2 .works-wrapper-head {
    grid-template-columns: auto;
  }
}
.work-area-2 .works-wrapper-head .text {
  font-family: var(--font_sequelsansmediumbody);
  font-size: 30px;
  font-weight: 315;
  line-height: 27px;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .work-area-2 .works-wrapper-head .text {
    font-size: 22px;
  }
}
@media only screen and (max-width: 991px) {
  .work-area-2 .works-wrapper-head .text {
    font-size: 20px;
  }
}
.work-area-2 .works-wrapper-head > *:nth-child(2) {
  text-align: end;
}
@media only screen and (max-width: 767px) {
  .work-area-2 .works-wrapper-head > *:nth-child(2) {
    text-align: start;
  }
}

.works-wrapper-2 {
  display: grid;
  gap: 98px 20px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1919px) {
  .works-wrapper-2 {
    gap: 78px 20px;
  }
}
@media only screen and (max-width: 1399px) {
  .works-wrapper-2 {
    gap: 58px 20px;
  }
}
@media only screen and (max-width: 991px) {
  .works-wrapper-2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 991px) {
  .works-wrapper-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .works-wrapper-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.works-wrapper-2 > *:nth-child(3) {
  grid-column-start: 4;
}
.works-wrapper-2 > *:nth-child(4) {
  grid-column-start: 2;
}
.works-wrapper-2 > *:nth-child(6) {
  grid-column-start: 1;
}
.works-wrapper-2 > *:nth-child(7) {
  grid-column-start: 3;
}
.works-wrapper-2 > *:nth-child(9) {
  grid-column-start: 2;
}
.works-wrapper-2 > *:nth-child(12) {
  grid-column-start: 3;
}
@media only screen and (max-width: 991px) {
  .works-wrapper-2 > *:nth-child(n) {
    grid-column-start: auto;
  }
}
.works-wrapper-2 .work-box {
  position: relative;
}
.works-wrapper-2 .work-box .thumb {
  overflow: hidden;
  position: relative;
  aspect-ratio: 440/290;
}
.works-wrapper-2 .work-box .thumb:hover .t-btn {
  opacity: 1;
}
.works-wrapper-2 .work-box .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: auto;
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease;
}
.works-wrapper-2 .work-box .thumb:hover img,
.works-wrapper-2 .work-box .thumb:focus-within img {
  transform: scale(1.045);
}
.works-wrapper-2 .work-box .thumb .t-btn {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  padding: 10px 20px;
  display: inline-block;
  background-color: white;
  color: var(--black);
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin: -25px 0 0 -65px;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.works-wrapper-2 .work-box .content {
  margin-top: 8px;
}
.works-wrapper-2 .work-box .title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-family: var(--font_sequelsansmediumbody);
  text-wrap: balance;
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-2 .work-box .title {
    font-size: 18px;
  }
}
.works-wrapper-2 .work-box .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.works-wrapper-2 .work-box .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #999999;
  display: flex;
  align-items: center;
}
.works-wrapper-2 .work-box .meta span:not(:first-child):before {
  content: "";
  width: 6px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
  margin-inline-end: 5px;
}

.actually-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 991px) {
  .actually-area {
    height: auto;
    min-height: 0;
    padding: 80px 0;
  }
}
.actually-area-inner {
  position: relative;
}
.actually-area .section-title {
  max-width: 716px;
  text-align: center;
  margin-inline: auto;
}
.actually-area .t_line > div {
  background-image: linear-gradient(to right, var(--primary) 50%, #CDC9C6 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.dark .actually-area .t_line > div {
  background-image: linear-gradient(to right, var(--primary) 50%, #464646 51%);
}
.actually-area .bg-area {
  position: absolute;
  top: 40%;
  left: 51%;
  transform: translate(-50%, -50%) scale(0);
  background-color: var(--primary);
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

/* service area style  */
.service-area-2-inner {
  margin-bottom: -2px;
}
.service-area-2 .section-header {
  position: relative;
  z-index: -1;
  transition: all 0.3s;
  margin-top: 91px;
  margin-bottom: 357px;
}
@media only screen and (max-width: 1919px) {
  .service-area-2 .section-header {
    margin-top: 61px;
    margin-bottom: 237px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area-2 .section-header {
    margin-top: 41px;
    margin-bottom: 157px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-area-2 .section-header {
    margin-top: 31px;
    margin-bottom: 117px;
  }
}
@media only screen and (max-width: 991px) {
  .service-area-2 .section-header {
    margin-top: 21px;
    margin-bottom: 77px;
  }
}
.service-area-2 .services-wrapper-box {
  background-color: var(--primary);
  position: relative;
}

.service-content-wrapper {
  background-color: var(--primary);
}
.service-content-wrapper .service-content {
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 705px auto;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .service-content-wrapper .service-content {
    grid-template-columns: 405px auto;
  }
}
@media only screen and (max-width: 991px) {
  .service-content-wrapper .service-content {
    grid-template-columns: auto;
  }
}
.service-content-wrapper .service-content .text {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: rgba(252, 247, 243, 0.3);
}
@media only screen and (max-width: 1919px) {
  .service-content-wrapper .service-content .text {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-content-wrapper .service-content .text {
    font-size: 22px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-content-wrapper .service-content .text {
    font-size: 20px;
  }
}
.service-content-wrapper .service-content .text.text-invert > div {
  background-image: linear-gradient(to right, rgb(252, 247, 243) 50%, rgba(252, 247, 243, 0.3) 51%);
}
.dark .service-content-wrapper .service-content .text.text-invert > div {
  background-image: linear-gradient(to right, rgb(17, 17, 17) 50%, rgba(17, 17, 17, 0.3) 51%);
}
.service-content-wrapper .service-content .btn-wrapper {
  margin-top: 54px;
}
.service-content-wrapper .service-content .text-wrapper {
  margin-top: 192px;
  max-width: 525px;
}
@media only screen and (max-width: 1919px) {
  .service-content-wrapper .service-content .text-wrapper {
    margin-top: 102px;
  }
}
@media only screen and (max-width: 991px) {
  .service-content-wrapper .service-content .text-wrapper {
    margin-top: 0;
  }
}
.service-content-wrapper .service-content .text-wrapper .text:not(:first-child) {
  margin-top: 35px;
}
.service-content-wrapper .service-content .section-info-wrapper .thumb {
  max-width: 250px;
  margin-left: auto;
}
.service-content-wrapper .service-content .section-info-wrapper .thumb img,
.service-content-wrapper .service-content .section-thumb-wrapper .thumb img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 991px) {
  .service-content-wrapper .service-content .section-info-wrapper .thumb {
    display: none;
  }
}

.services-wrapper-2 .service-box {
  display: grid;
  gap: 20px 50px;
  grid-template-columns: 215px 1fr 595px;
  border-top: 1px solid #292828;
  padding-top: 59px;
  padding-bottom: 72px;
  background-color: var(--primary);
  transition: all 0.5s;
}
.dark .services-wrapper-2 .service-box {
  border-color: #EAE3DD;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-2 .service-box {
    grid-template-columns: 215px 1fr 395px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-2 .service-box {
    grid-template-columns: 165px 1fr 395px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-2 .service-box {
    grid-template-columns: 115px 1fr 375px;
    padding-top: 49px;
    padding-bottom: 52px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-2 .service-box {
    grid-template-columns: 55px 1fr 285px;
    padding-top: 39px;
    padding-bottom: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .services-wrapper-2 .service-box {
    grid-template-columns: auto;
  }
}
.services-wrapper-2 .service-box:last-child {
  border-bottom: 1px solid #292828;
}
.dark .services-wrapper-2 .service-box:last-child {
  border-color: #EAE3DD;
}
.services-wrapper-2 .service-box-wrapper {
  background-color: #292828;
}
.dark .services-wrapper-2 .service-box-wrapper {
  background-color: #EAE3DD;
}
.services-wrapper-2 .service-box-wrapper:hover .service-box {
  border-radius: 120px;
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-2 .service-box-wrapper:hover .service-box {
    border-radius: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-2 .service-box-wrapper:hover .service-box {
    border-radius: 0px;
  }
}
.services-wrapper-2 .service-box-wrapper:hover .service-box .number {
  transform: translateX(60px);
}
@media only screen and (max-width: 991px) {
  .services-wrapper-2 .service-box-wrapper:hover .service-box .number {
    transform: none;
  }
}
.services-wrapper-2 .service-box .number {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #F3F3F3;
  margin-top: 12px;
  transition: all 0.5s;
}
.dark .services-wrapper-2 .service-box .number {
  color: var(--black);
}
.services-wrapper-2 .service-box .title {
  font-size: 110px;
  font-weight: 310;
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: #F3F3F3;
}
.dark .services-wrapper-2 .service-box .title {
  color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-2 .service-box .title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-2 .service-box .title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-2 .service-box .title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-2 .service-box .title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .services-wrapper-2 .service-box .title {
    font-size: 35px;
  }
}
.services-wrapper-2 .service-box .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #F3F3F3;
  max-width: 370px;
  margin-top: 7px;
}
.dark .services-wrapper-2 .service-box .text {
  color: var(--black);
}

/* testimonial area style  */
.moving-testimonial .testimonial-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .moving-testimonial .testimonial-wrapper {
    height: auto;
  }
}

.testimonial-area {
  background-color: var(--primary);
}
.testimonial-area .section-title {
  max-width: 1000px;
  margin-left: auto;
  color: #F3F3F3;
}
.dark .testimonial-area .section-title {
  color: var(--black);
}
.testimonial-area .section-header {
  margin-top: 46px;
}
.testimonial-area .testimonial-wrapper-box {
  padding-top: 93px;
}
.testimonial-area .testimonial-wrapper {
  padding-top: 43px;
  padding-bottom: 43px;
  display: flex;
  gap: 0 0;
  align-items: flex-start;
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .testimonial-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial-area .testimonial-wrapper {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.testimonial-area .testimonial-item {
  background-color: #1D1C1C;
  padding: 38px 45px 45px;
  min-width: 398px;
}
.dark .testimonial-area .testimonial-item {
  background-color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .testimonial-area .testimonial-item {
    min-width: 358px;
  }
}
@media only screen and (max-width: 1919px) {
  .testimonial-area .testimonial-item {
    padding: 18px 30px 25px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial-area .testimonial-item {
    padding: 18px 25px 25px;
  }
}
@media only screen and (max-width: 1919px) {
  .testimonial-area .testimonial-item:nth-child(n+5) {
    display: none;
  }
}
.testimonial-area .testimonial-item.light {
  background-color: #F3F3F3;
}
.dark .testimonial-area .testimonial-item.light {
  background-color: #EAE3DD;
}
.testimonial-area .testimonial-item.light .text {
  color: var(--black);
}
.testimonial-area .testimonial-item.light .name {
  color: var(--black);
}
.testimonial-area .testimonial-item.light .post {
  color: rgba(17, 17, 17, 0.4);
}
.testimonial-area .testimonial-item.light .icon {
  background-color: var(--black);
}
.testimonial-area .testimonial-item .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #F3F3F3;
}
.testimonial-area .testimonial-item .name {
  font-size: 20px;
  font-weight: 310;
  line-height: 27px;
  letter-spacing: -0.07em;
  color: #F3F3F3;
}
.testimonial-area .testimonial-item .post {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(252, 247, 243, 0.4);
  display: inline-block;
  margin-top: 1px;
}
.testimonial-area .testimonial-item .author {
  margin-top: 54px;
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media only screen and (max-width: 1919px) {
  .testimonial-area .testimonial-item .author {
    margin-top: 34px;
  }
}
.testimonial-area .testimonial-item .icon {
  width: 70px;
  height: 70px;
  background-color: #F3F3F3;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* client area 2 style  */
.client-area-2 {
  background-color: var(--primary);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.client-area-2 .section-header .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  max-width: 340px;
  color: #F3F3F3;
  margin-inline: auto;
}
.dark .client-area-2 .section-header .text {
  color: var(--black);
}
.client-area-2 .clients-wrapper-box {
  margin-top: 63px;
}
@media only screen and (max-width: 1199px) {
  .client-area-2 .clients-wrapper-box {
    margin-top: 43px;
  }
}
.client-area-2 .clients-wrapper {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.client-area-2 .clients-wrapper .client-slider-active .swiper-slide {
  width: auto;
}
.client-area-2 .clients-wrapper .client-slider-active .swiper-wrapper {
  transition-timing-function: linear !important;
}
.client-area-2 .client-box {
  border: 1px solid rgba(252, 247, 243, 0.1);
  border-radius: 70px;
  width: 215px;
  height: 140px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.dark .client-area-2 .client-box {
  border-color: rgba(17, 17, 17, 0.1);
}
@media only screen and (max-width: 1919px) {
  .client-area-2 .client-box {
    width: 155px;
    height: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area-2 .client-box {
    width: 135px;
    height: 70px;
  }
}

/* award area style  */
.award-area {
  background-color: #F3F3F3;
  position: relative;
}
.dark .award-area {
  background-color: var(--black);
}
.award-area .section-title {
  max-width: 1190px;
}
.award-area .section-header {
  margin-top: 46px;
}
.award-area .awards-wrapper-box {
  margin-top: 93px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
@media only screen and (max-width: 1919px) {
  .award-area .awards-wrapper-box {
    margin-top: 73px;
  }
}
@media only screen and (max-width: 1399px) {
  .award-area .awards-wrapper-box {
    margin-top: 53px;
  }
}
.award-area .awards-wrapper {
  max-width: 630px;
  margin-right: 270px;
  margin-left: auto;
}
@media only screen and (max-width: 1199px) {
  .award-area .awards-wrapper {
    margin-right: 0;
  }
}
.award-area .award-box {
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 1fr 370px;
}
@media only screen and (max-width: 767px) {
  .award-area .award-box {
    grid-template-columns: 1fr 340px;
  }
}
@media (max-width: 575px) {
  .award-area .award-box {
    grid-template-columns: 1fr;
  }
}
.award-area .award-box:not(:first-child) {
  margin-top: 56px;
}
.award-area .award-box .award-list li {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: auto auto;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .award-area .award-box .award-list li {
    font-size: 18px;
  }
}
.award-area .award-box .category {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .award-area .award-box .category {
    font-size: 18px;
  }
}

/* cta area 2 style  */
.cta-area-2-inner {
  overflow: hidden;
}
.cta-area-2 .section-title {
  font-size: 200px;
  font-weight: 310;
  line-height: 0.85;
  letter-spacing: -0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media only screen and (max-width: 1919px) {
  .cta-area-2 .section-title {
    font-size: 140px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-2 .section-title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-2 .section-title {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .cta-area-2 .section-title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .cta-area-2 .section-title {
    font-size: 40px;
  }
}
.cta-area-2 .section-title a {
  display: inline-flex;
  align-items: center;
}
.cta-area-2 .section-title .line {
  width: 1em;
  height: 0.1em;
  background-color: var(--primary);
  display: inline-block;
  align-self: center;
  margin-left: 0.3em;
  margin-right: 0.2em;
}
.cta-area-2 .section-header {
  margin-top: 70px;
  margin-bottom: 93px;
}
@media only screen and (max-width: 1919px) {
  .cta-area-2 .section-header {
    margin-top: 30px;
    margin-bottom: 73px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-2 .section-header {
    margin-top: 10px;
    margin-bottom: 53px;
  }
}
.cta-area-2 .section-header .title-wrapper {
  animation: 45s t-slide infinite linear;
}
.cta-area-2 .section-header .t-btn {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  padding: 10px 20px;
  display: inline-block;
  background-color: var(--theme);
  color: var(--black);
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  margin: -25px 0 0 -65px;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* marketing agency page css */
.body-marketing-agency {
  background-color: #F3F3F3;
}
.body-marketing-agency.dark {
  --border: rgba(252, 247, 243, 0.1);
}
@media (min-width: 1850px) {
  .body-marketing-agency .container.large {
    max-width: 1850px;
  }
}
.body-marketing-agency .section-title .mb-14 {
  transform: translate(0px, -14px);
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .body-marketing-agency .section-title .mb-14 {
    display: block;
    transform: none;
  }
}
@media only screen and (max-width: 767px) {
  .body-marketing-agency .section-title .mb-14 {
    margin-top: 10px;
  }
}

/* hero area 3 style  */
.hero-area-3-inner {
  padding-top: 28px;
  padding-bottom: 100px;
}
.hero-area-3 .section-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-transform: unset;
  display: inline-block;
  max-width: 231px;
  color: var(--primary);
  text-transform: math-auto;
}
.hero-area-3 .subtitle-wrapper {
  max-width: 1090px;
  margin-left: auto;
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .subtitle-wrapper {
    max-width: 790px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-3 .subtitle-wrapper {
    max-width: 690px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .subtitle-wrapper {
    max-width: 590px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-3 .subtitle-wrapper {
    margin-left: 0;
    margin-top: 70px;
  }
}
.hero-area-3 .section-title {
  font-size: 140px;
  font-weight: 310;
  line-height: 0.85;
  letter-spacing: -0.07em;
  max-width: 1240px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .section-title {
    font-size: 100px;
    max-width: 940px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-title {
    font-size: 70px;
    max-width: 640px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-3 .section-title {
    font-size: 50px;
  }
}
.hero-area-3 .section-title .title-shape-1 {
  height: 96px;
  margin-right: 15px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .section-title .title-shape-1 {
    height: 76px;
    margin-right: 10px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-title .title-shape-1 {
    height: 51px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-3 .section-title .title-shape-1 {
    height: 36px;
    margin-right: 5px;
  }
}
.hero-area-3 .section-title .title-shape-2 {
  height: 84px;
  margin-left: 5px;
  margin-top: -10px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .section-title .title-shape-2 {
    height: 64px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-title .title-shape-2 {
    height: 44px;
    margin-top: -6px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-3 .section-title .title-shape-2 {
    height: 30px;
  }
}
.hero-area-3 .section-title .text-underline {
  color: rgba(17, 17, 17, 0.2);
  text-decoration-line: underline;
  text-decoration-thickness: 7px;
  text-underline-offset: 12px;
  position: relative;
  cursor: pointer;
}
.dark .hero-area-3 .section-title .text-underline {
  color: rgba(252, 247, 243, 0.2);
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .section-title .text-underline {
    text-decoration-thickness: 6px;
    text-underline-offset: 8px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-title .text-underline {
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-3 .section-title .text-underline {
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}
.hero-area-3 .section-title .text-underline .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 250px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-area-3 .section-title .text-underline .text-underline:hover .hover-image {
  opacity: 1;
}
.hero-area-3 .title-wrapper {
  margin-top: 43px;
}
@media only screen and (max-width: 991px) {
  .hero-area-3 .title-wrapper {
    margin-top: 23px;
  }
}
.hero-area-3 .social-links {
  display: flex;
  gap: 8px 20px;
  max-width: 270px;
  flex-wrap: wrap;
  align-self: flex-end;
}
@media only screen and (max-width: 991px) {
  .hero-area-3 .social-links {
    max-width: 100%;
  }
}
.hero-area-3 .social-links li {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  position: relative;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--primary);
}
.hero-area-3 .social-links li::before {
  width: 100%;
  height: 1px;
  background-color: currentColor;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
}
.hero-area-3 .social-links li:hover::before {
  width: 0;
}
.hero-area-3 .info-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: var(--primary);
  max-width: 140px;
}
.hero-area-3 .about-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  max-width: 410px;
}
@media only screen and (max-width: 991px) {
  .hero-area-3 .about-text {
    max-width: 100%;
  }
}
.hero-area-3 .section-content {
  display: grid;
  gap: 30px 50px;
  grid-template-columns: 1fr 310px 730px;
  margin-top: 88px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-3 .section-content {
    grid-template-columns: 1fr 310px 430px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-3 .section-content {
    grid-template-columns: 1fr 310px 330px;
    margin-top: 58px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-content {
    grid-template-columns: 1fr 210px 330px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-3 .section-content {
    grid-template-columns: 1fr;
  }
}
.hero-area-3 .section-content .btn-wrapper {
  margin-top: 56px;
}
@media only screen and (max-width: 1199px) {
  .hero-area-3 .section-content .btn-wrapper {
    margin-top: 36px;
  }
}

.text-underline {
  position: relative;
  cursor: pointer;
}

.image-hover {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 250px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  .image-hover {
    display: none;
  }
}

.text-underline:hover .image-hover {
  opacity: 1;
  transform: scale(1);
}

/* service area 3 style  */
.service-area-3 .section-header {
  margin-top: 50px;
}
.service-area-3 .section-header .rr-btn-group.b {
  padding: 9px 18px !important;
}
.service-area-3 .services-wrapper-box {
  margin-top: 86px;
}
@media only screen and (max-width: 1919px) {
  .service-area-3 .services-wrapper-box {
    margin-top: 56px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area-3 .services-wrapper-box {
    margin-top: 36px;
  }
}

.services-wrapper-3 {
  display: grid;
  gap: 30px 60px;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 {
    gap: 30px 40px;
  }
}
@media only screen and (max-width: 991px) {
  .services-wrapper-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .services-wrapper-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.services-wrapper-3 .service-box {
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 110px 1fr;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 .service-box {
    gap: 20px 20px;
    grid-template-columns: 70px 1fr;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-3 .service-box {
    grid-template-columns: 1fr;
  }
}
.services-wrapper-3 .service-box:hover .thumb img {
  transform: scale(1.1);
}
.services-wrapper-3 .service-box:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border);
  top: 0;
  left: -30px;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 .service-box:before {
    left: -20px;
  }
}
.services-wrapper-3 .service-box .thumb {
  margin-top: 8px;
  border-radius: 25px;
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 .service-box .thumb {
    border-radius: 15px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-3 .service-box .thumb {
    max-width: 70px;
  }
}
.services-wrapper-3 .service-box .thumb img {
  width: 100%;
  transition: all 0.5s;
}
.services-wrapper-3 .service-box .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 .service-box .title {
    font-size: 24px;
  }
}
.services-wrapper-3 .service-box .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-top: 18px;
}
.services-wrapper-3 .service-box .rr-btn-underline {
  text-transform: unset;
  font-size: 18px;
  color: var(--primary);
  margin-top: 50px;
  display: inline-block;
  position: relative;
}
.services-wrapper-3 .service-box .rr-btn-underline::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.4s;
}
.services-wrapper-3 .service-box .rr-btn-underline:hover::before {
  width: 0;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-3 .service-box .rr-btn-underline {
    margin-top: 30px;
  }
}

/* work area 3 style  */
.work-area-3 .section-title {
  max-width: 1060px;
}
@media only screen and (max-width: 1919px) {
  .work-area-3 .section-title {
    max-width: 860px;
  }
}
.work-area-3 .section-title .rr-btn-group:hover .c {
  transform: translate(-11px, 0px);
}
.work-area-3 .works-wrapper-box {
  margin-top: 86px;
}
@media only screen and (max-width: 1919px) {
  .work-area-3 .works-wrapper-box {
    margin-top: 56px;
  }
}
@media only screen and (max-width: 1199px) {
  .work-area-3 .works-wrapper-box {
    margin-top: 36px;
  }
}

.works-wrapper-3 {
  display: grid;
  gap: 68px 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1919px) {
  .works-wrapper-3 {
    gap: 48px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .works-wrapper-3 {
    gap: 38px 20px;
  }
}
@media (max-width: 575px) {
  .works-wrapper-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.works-wrapper-3 > * .image {
  transform-origin: bottom right;
}
.works-wrapper-3 > *:nth-child(2n) .image {
  transform-origin: bottom left;
}
.works-wrapper-3 .work-box .thumb:hover .t-btn {
  opacity: 1;
}
.works-wrapper-3 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  transform: scale(0.9);
}
.works-wrapper-3 .work-box .thumb .image img {
  transform-origin: center;
}
.works-wrapper-3 .work-box .thumb img {
  width: 100%;
  cursor: auto;
}
.works-wrapper-3 .work-box .thumb .t-btn {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  padding: 10px 20px;
  display: inline-block;
  background-color: white;
  color: var(--black);
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin: -25px 0 0 -65px;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.works-wrapper-3 .work-box .content {
  margin-top: 14px;
}
.works-wrapper-3 .work-box .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.08em;
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-3 .work-box .title {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .works-wrapper-3 .work-box .title {
    font-size: 20px;
  }
}
.works-wrapper-3 .work-box .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 10px;
}
.works-wrapper-3 .work-box .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
}
.works-wrapper-3 .work-box .meta span:not(:first-child):before {
  content: "";
  width: 10px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
  margin-inline-end: 5px;
}

/* approach area style  */
.approach-area .section-header {
  margin-top: 43px;
}
.approach-area .section-title-wrapper {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 1225px;
  align-items: flex-end;
}
@media only screen and (max-width: 1919px) {
  .approach-area .section-title-wrapper {
    grid-template-columns: 1fr 905px;
  }
}
@media only screen and (max-width: 1399px) {
  .approach-area .section-title-wrapper {
    grid-template-columns: 1fr 675px;
  }
}
@media only screen and (max-width: 1199px) {
  .approach-area .section-title-wrapper {
    grid-template-columns: 1fr 575px;
  }
}
@media only screen and (max-width: 991px) {
  .approach-area .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}
.approach-area .section-subtitle {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
}
@media only screen and (max-width: 1919px) {
  .approach-area .section-subtitle {
    font-size: 24px;
  }
}
@media only screen and (max-width: 991px) {
  .approach-area .section-subtitle {
    font-size: 18px;
  }
  .approach-area .section-subtitle br {
    display: none;
  }
}
.approach-area .section-title {
  max-width: 1126px;
}
.approach-area .section-title span {
  color: rgba(17, 17, 17, 0.3);
}
.dark .approach-area .section-title span {
  color: rgba(252, 247, 243, 0.3);
}
.approach-area .approach-wrapper-box {
  margin-top: 94px;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 1225px;
  align-items: flex-start;
  margin-bottom: 80px;
}
@media only screen and (max-width: 1919px) {
  .approach-area .approach-wrapper-box {
    grid-template-columns: 1fr 905px;
    margin-top: 64px;
  }
}
@media only screen and (max-width: 1399px) {
  .approach-area .approach-wrapper-box {
    grid-template-columns: 1fr 675px;
  }
}
@media only screen and (max-width: 1199px) {
  .approach-area .approach-wrapper-box {
    grid-template-columns: 1fr 575px;
  }
}
@media only screen and (max-width: 991px) {
  .approach-area .approach-wrapper-box {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
}
.approach-area .approach-wrapper-box .steps {
  font-family: var(--font_sequelsansromanbody);
  font-size: 265px;
  font-weight: 310;
  line-height: 0.65;
  letter-spacing: -0.07em;
  color: var(--primary);
}
@media only screen and (max-width: 1919px) {
  .approach-area .approach-wrapper-box .steps {
    font-size: 205px;
  }
}
@media only screen and (max-width: 1399px) {
  .approach-area .approach-wrapper-box .steps {
    font-size: 165px;
  }
}
@media only screen and (max-width: 991px) {
  .approach-area .approach-wrapper-box .steps {
    display: none;
  }
}
.approach-area .approach-box {
  display: grid;
  gap: 10px 50px;
  grid-template-columns: 60px 1fr 595px;
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed #878482;
}
.approach-area .approach-box:first-child {
  border-top: 1px dashed #878482;
}
@media only screen and (max-width: 1919px) {
  .approach-area .approach-box {
    grid-template-columns: 60px 1fr 395px;
  }
}
@media only screen and (max-width: 1399px) {
  .approach-area .approach-box {
    grid-template-columns: 60px 1fr;
  }
}
@media only screen and (max-width: 991px) {
  .approach-area .approach-box {
    gap: 10px 30px;
  }
}
@media (max-width: 575px) {
  .approach-area .approach-box {
    grid-template-columns: 30px 1fr;
  }
}
.approach-area .approach-box .number {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .approach-area .approach-box .number {
    grid-row: span 2;
  }
}
.approach-area .approach-box .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 30px;
  letter-spacing: -0.07em;
}
@media only screen and (max-width: 1919px) {
  .approach-area .approach-box .title {
    font-size: 24px;
  }
}
.approach-area .approach-box .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

/* funfact area 2 style  */
.funfact-area-2 {
  background-color: var(--bg);
}
.funfact-area-2 .section-header {
  margin-top: 50px;
}
.funfact-area-2 .section-title {
  max-width: 820px;
  color: #F3F3F3;
}
@media only screen and (max-width: 1399px) {
  .funfact-area-2 .section-title {
    max-width: 500px;
  }
}
.funfact-area-2 .section-content {
  margin-top: 79px;
}
@media only screen and (max-width: 1919px) {
  .funfact-area-2 .section-content {
    margin-top: 59px;
  }
}
.funfact-area-2 .section-content .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white-2);
  max-width: 410px;
}
.funfact-area-2 .section-content .year {
  font-family: var(--font_sequelsansromanbody);
  font-size: 580px;
  font-weight: 315;
  line-height: 0.8;
  letter-spacing: -0.1em;
  color: #F3F3F3;
  display: inline-block;
}
@media only screen and (max-width: 1919px) {
  .funfact-area-2 .section-content .year {
    font-size: 380px;
  }
}
@media only screen and (max-width: 1399px) {
  .funfact-area-2 .section-content .year {
    font-size: 320px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area-2 .section-content .year {
    font-size: 240px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area-2 .section-content .year {
    font-size: 150px;
  }
}
@media (max-width: 575px) {
  .funfact-area-2 .section-content .year {
    font-size: 100px;
  }
}
.funfact-area-2 .section-content .info-text {
  margin-top: 49px;
  margin-left: 265px;
  display: grid;
  gap: 20px 90px;
  grid-template-columns: auto 1fr;
  align-items: flex-end;
}
@media only screen and (max-width: 1919px) {
  .funfact-area-2 .section-content .info-text {
    margin-top: 29px;
  }
}
@media only screen and (max-width: 1399px) {
  .funfact-area-2 .section-content .info-text {
    margin-left: 165px;
  }
}
@media only screen and (max-width: 991px) {
  .funfact-area-2 .section-content .info-text {
    margin-top: 19px;
  }
}
@media only screen and (max-width: 767px) {
  .funfact-area-2 .section-content .info-text {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .funfact-area-2 .section-content .info-text {
    grid-template-columns: 1fr;
  }
}
.funfact-area-2 .section-content .info-text img {
  height: 43px;
}
@media only screen and (max-width: 1919px) {
  .funfact-area-2 .section-content .info-text img {
    height: 33px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area-2 .section-content .info-text img {
    height: 20px;
  }
}
@media (max-width: 575px) {
  .funfact-area-2 .section-content .info-text img {
    display: none;
  }
}
.funfact-area-2 .section-content .info-text .text {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: #F3F3F3;
  max-width: 273px;
  margin-top: 42px;
}
@media only screen and (max-width: 1919px) {
  .funfact-area-2 .section-content .info-text .text {
    font-size: 24px;
    max-width: 223px;
  }
}
@media only screen and (max-width: 1199px) {
  .funfact-area-2 .section-content .info-text .text {
    font-size: 18px;
    max-width: 173px;
    margin-top: 22px;
  }
}
.funfact-area-2 .section-content .text-wrapper {
  margin-left: 265px;
}
@media only screen and (max-width: 1399px) {
  .funfact-area-2 .section-content .text-wrapper {
    margin-left: 165px;
  }
}
@media only screen and (max-width: 767px) {
  .funfact-area-2 .section-content .text-wrapper {
    margin-left: 0;
  }
}
.funfact-area-2 .thumb {
  margin-top: 94px;
}
.funfact-area-2 .thumb img {
  width: 100%;
  transform: scale(0.67);
  transform-origin: top right;
}

/* client area 3 style  */
.client-area-3 {
  background-color: var(--bg);
}
.client-area-3 .section-header {
  margin-top: 69px;
}
.client-area-3 .section-header .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  max-width: 340px;
  color: #F3F3F3;
  margin-inline: auto;
}
.client-area-3 .clients-wrapper-box {
  margin-top: 63px;
  margin-bottom: 80px;
}
@media only screen and (max-width: 1199px) {
  .client-area-3 .clients-wrapper-box {
    margin-top: 43px;
  }
}
.client-area-3 .clients-wrapper {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.client-area-3 .clients-wrapper .client-slider-active .swiper-slide {
  width: auto;
}
.client-area-3 .clients-wrapper .client-slider-active .swiper-wrapper {
  transition-timing-function: linear !important;
}
.client-area-3 .client-box {
  border: 1px solid rgba(252, 247, 243, 0.1);
  border-radius: 70px;
  width: 215px;
  height: 140px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1919px) {
  .client-area-3 .client-box {
    width: 155px;
    height: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area-3 .client-box {
    width: 135px;
    height: 70px;
  }
}

/* blog area style  */
.blog-area .section-title .rr-btn-group:hover .c {
  transform: translate(-11px, 0px);
}
.blog-area .section-title {
  max-width: 710px;
}
.blog-area .blogs-wrapper-box {
  margin-top: 86px;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blogs-wrapper-box {
    margin-top: 56px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog-area .blogs-wrapper-box {
    margin-top: 36px;
  }
}
.blog-area .blogs-wrapper {
  display: grid;
  gap: 76px 60px;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blogs-wrapper {
    gap: 46px 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog-area .blogs-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .blog-area .blogs-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.blog-area .blog {
  position: relative;
}
.blog-area .blog:hover .thumb img {
  transform: scale(1.1);
}
.blog-area .blog:hover .title .arrow {
  background-color: var(--primary);
}
.blog-area .blog:hover .title .arrow svg {
  transform: rotate(60deg);
}
.blog-area .blog:hover .title .arrow svg * {
  fill: var(--white);
}
.dark .blog-area .blog:hover .title .arrow svg * {
  fill: var(--black);
}
.blog-area .blog:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border);
  top: 0;
  left: -30px;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blog:before {
    left: -20px;
  }
}
.blog-area .blog .thumb {
  overflow: hidden;
}
.blog-area .blog .thumb img {
  width: 100%;
  transition: all 0.5s;
}
.blog-area .blog .content {
  margin-top: 24px;
}
@media only screen and (max-width: 1199px) {
  .blog-area .blog .content {
    margin-top: 14px;
  }
}
.blog-area .blog .title {
  font-size: 36px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
  display: inline;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blog .title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1399px) {
  .blog-area .blog .title {
    font-size: 22px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog-area .blog .title {
    font-size: 20px;
  }
}
.blog-area .blog .title .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  transition: all 0.3s;
  border-radius: 50%;
  border: 2px solid var(--primary);
  transform: translate(0px, -1px);
  margin-left: 5px;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blog .title .arrow {
    width: 20px;
    height: 20px;
  }
}
@media only screen and (max-width: 1399px) {
  .blog-area .blog .title .arrow {
    width: 17px;
    height: 17px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog-area .blog .title .arrow {
    width: 15px;
    height: 15px;
    border-width: 1px;
  }
}
.blog-area .blog .title .arrow svg {
  transition: all 0.3s;
  width: 13px;
}
@media only screen and (max-width: 1919px) {
  .blog-area .blog .title .arrow svg {
    width: 10px;
  }
}
@media only screen and (max-width: 1399px) {
  .blog-area .blog .title .arrow svg {
    width: 7px;
  }
}
.blog-area .blog .title .arrow svg * {
  fill: var(--primary);
}
.blog-area .blog .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 14px;
}
@media only screen and (max-width: 1199px) {
  .blog-area .blog .meta {
    margin-top: 9px;
  }
}
.blog-area .blog .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--secondary);
}
.blog-area .blog .meta span.has-left-line {
  padding-inline-start: 15px;
}
.blog-area .blog .meta span.has-left-line:before {
  width: 10px;
}
.blog-area .blog .meta .name span {
  font-weight: 500;
  color: var(--primary);
}

/* cta area 3 style  */
.cta-area-3 .section-header {
  margin-top: 50px;
  margin-left: 925px;
  margin-bottom: 86px;
}
@media only screen and (max-width: 1919px) {
  .cta-area-3 .section-header {
    margin-bottom: 56px;
    margin-left: 555px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-3 .section-header {
    margin-left: 475px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-3 .section-header {
    margin-bottom: 36px;
    margin-left: 325px;
  }
}
@media only screen and (max-width: 991px) {
  .cta-area-3 .section-header {
    margin-left: 0;
  }
}
.cta-area-3 .section-header .rr-btn-group:hover .c {
  transform: translate(-11px, 0px);
}
.cta-area-3 .section-title {
  max-width: 680px;
}
@media only screen and (max-width: 1919px) {
  .cta-area-3 .section-title {
    max-width: 540px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-3 .section-title {
    max-width: 410px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-3 .section-title {
    max-width: 340px;
  }
}

/* startup agency page css */
.body-startup-agency {
  background-color: #FFFFFF;
}
@media (min-width: 1650px) {
  .body-startup-agency .container.large {
    max-width: 1650px;
  }
}
.body-startup-agency .section-subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-transform: unset;
  display: inline-block;
  color: var(--primary);
  padding-bottom: 10px;
  position: relative;
}
.body-startup-agency .section-subtitle svg {
  position: absolute;
  bottom: 0;
  width: 100% !important;
  left: 0;
  height: 7px;
}
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 195.8011322021px;
    stroke-dasharray: 195.8011322021px;
  }
  20% {
    stroke-dashoffset: 391.6022644043px;
    stroke-dasharray: 195.8011322021px;
  }
  100% {
    stroke-dashoffset: 391.6022644043px;
    stroke-dasharray: 195.8011322021px;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 195.8011322021px;
    stroke-dasharray: 195.8011322021px;
  }
  20% {
    stroke-dashoffset: 391.6022644043px;
    stroke-dasharray: 195.8011322021px;
  }
  100% {
    stroke-dashoffset: 391.6022644043px;
    stroke-dasharray: 195.8011322021px;
  }
}
.body-startup-agency .section-subtitle .svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 5s ease-in-out 0s both infinite;
  animation: animate-svg-stroke-1 5s ease-in-out 0s both infinite;
}
.body-startup-agency .rr-btn-underline {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  text-transform: unset;
  gap: 5px;
}
.body-startup-agency .rr-btn-underline::before {
  height: 1px;
}
.body-startup-agency .rr-btn-underline .icon {
  width: 13px;
}
.body-startup-agency .header-area-5 .side-toggle {
  background-color: rgb(243, 243, 243);
}

/* hero area style  */
.hero-area-5 .section-content-wrapper {
  margin-top: 16px;
  display: grid;
  gap: 40px 110px;
  grid-template-columns: 715px 1fr;
}
@media only screen and (max-width: 1919px) {
  .hero-area-5 .section-content-wrapper {
    gap: 40px 80px;
    grid-template-columns: 515px 1fr;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-5 .section-content-wrapper {
    gap: 40px 60px;
    grid-template-columns: 425px 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-5 .section-content-wrapper {
    grid-template-columns: 455px 1fr;
    margin-top: 26px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-5 .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}
.hero-area-5 .hero-video {
  margin-top: 14px;
  border-radius: 15px;
  overflow: hidden;
}
.hero-area-5 .hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-area-5 .section-title {
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  max-width: 575px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-5 .section-title {
    font-size: 70px;
    max-width: 505px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-5 .section-title {
    font-size: 60px;
    max-width: 455px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-5 .section-title {
    font-size: 50px;
    max-width: 375px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-5 .section-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-5 .section-title {
    font-size: 35px;
  }
}
.hero-area-5 .section-content .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}
.hero-area-5 .section-content .text-btn-wrapper {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 43px;
  display: grid;
  grid-template-columns: 330px 1fr;
}
@media only screen and (max-width: 1199px) {
  .hero-area-5 .section-content .text-btn-wrapper {
    grid-template-columns: 1fr;
  }
}
.hero-area-5 .section-content .text-wrapper {
  margin-top: 62px;
  margin-bottom: 62px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-5 .section-content .text-wrapper {
    margin-top: 42px;
    margin-bottom: 42px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-5 .section-content .text-wrapper {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}
.hero-area-5 .section-content .btn-wrapper {
  border-left: 1px solid var(--border);
  margin-left: 74px;
  padding-left: 28px;
  padding-top: 90px;
  padding-bottom: 68px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-5 .section-content .btn-wrapper {
    margin-left: 44px;
    padding-top: 70px;
    padding-bottom: 48px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-5 .section-content .btn-wrapper {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 38px;
    border-left: 0;
    padding-left: 0;
  }
}

/* work area 4 style  */
.work-area-4 .section-header {
  border-top: 1px solid var(--border);
  padding-top: 35px;
}
.work-area-4 .section-header .btn-wrapper {
  margin-top: 44px;
}
@media only screen and (max-width: 1919px) {
  .work-area-4 .section-header .btn-wrapper {
    margin-top: 34px;
  }
}
@media only screen and (max-width: 1199px) {
  .work-area-4 .section-header .btn-wrapper {
    margin-top: 24px;
  }
}
.work-area-4 .section-header .subtitle-wrapper {
  margin-top: 9px;
}
.work-area-4 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1015px;
}
@media only screen and (max-width: 1919px) {
  .work-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 815px;
  }
}
@media only screen and (max-width: 1399px) {
  .work-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .work-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 600px;
  }
}
@media only screen and (max-width: 991px) {
  .work-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 430px;
  }
}
@media only screen and (max-width: 767px) {
  .work-area-4 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}
.work-area-4 .section-title {
  max-width: 700px;
}
@media only screen and (max-width: 1919px) {
  .work-area-4 .section-title {
    max-width: 600px;
  }
}
@media only screen and (max-width: 1399px) {
  .work-area-4 .section-title {
    max-width: 450px;
  }
}
@media only screen and (max-width: 1199px) {
  .work-area-4 .section-title {
    max-width: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .work-area-4 .section-title {
    max-width: 100%;
  }
}
.work-area-4 .works-wrapper-box {
  margin-top: 29px;
}
@media only screen and (max-width: 1399px) {
  .work-area-4 .works-wrapper-box {
    margin-top: 9px;
  }
}

.works-wrapper-4 {
  display: grid;
  gap: 85px 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1919px) {
  .works-wrapper-4 {
    gap: 65px 10px;
  }
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-4 {
    gap: 45px 10px;
  }
}
@media only screen and (max-width: 767px) {
  .works-wrapper-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.works-wrapper-4 > * .image {
  transform-origin: bottom right;
}
.works-wrapper-4 > *:nth-child(2n) .image {
  transform-origin: bottom left;
}
.works-wrapper-4 .work-box .thumb {
  border-radius: 15px;
  overflow: hidden;
}
.works-wrapper-4 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  transform: scale(0.9);
}
.works-wrapper-4 .work-box .thumb .image img {
  transform-origin: center;
}
.works-wrapper-4 .work-box .thumb img {
  width: 100%;
  cursor: auto;
}
.works-wrapper-4 .work-box .content {
  margin-top: 24px;
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-4 .work-box .content {
    margin-top: 14px;
  }
}
.works-wrapper-4 .work-box .title {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-4 .work-box .title {
    font-size: 18px;
  }
}
.works-wrapper-4 .work-box .tag {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.05em;
  display: block;
  font-family: var(--font_bdogrotesk);
  color: var(--primary);
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-4 .work-box .tag {
    font-size: 18px;
  }
}
.works-wrapper-4 .work-box .date {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.05em;
  display: block;
  font-family: var(--font_bdogrotesk);
  color: var(--primary);
}
@media only screen and (max-width: 1199px) {
  .works-wrapper-4 .work-box .date {
    font-size: 18px;
  }
}

/* marquee text area style  */
.marquee-text-area {
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee-text-area .section-title {
  font-size: 280px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
  white-space: nowrap;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1919px) {
  .marquee-text-area .section-title {
    font-size: 210px;
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .marquee-text-area .section-title {
    font-size: 200px;
  }
}
@media only screen and (max-width: 1199px) {
  .marquee-text-area .section-title {
    font-size: 150px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .marquee-text-area .section-title {
    font-size: 110px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .marquee-text-area .section-title {
    font-size: 90px;
  }
}
@media (max-width: 575px) {
  .marquee-text-area .section-title {
    font-size: 60px;
    margin-bottom: 10px;
  }
}
.marquee-text-area .moving-text {
  width: 100%;
}

/* about area 4 style  */
.about-area-4 .section-header {
  border-top: 1px solid var(--border);
  padding-top: 35px;
}
.about-area-4 .section-header .btn-wrapper {
  display: flex;
  gap: 20px 25px;
  align-items: center;
  margin-top: 73px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 1919px) {
  .about-area-4 .section-header .btn-wrapper {
    margin-top: 53px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-4 .section-header .btn-wrapper {
    margin-top: 43px;
  }
}
.about-area-4 .section-header .subtitle-wrapper {
  margin-top: 9px;
}
.about-area-4 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1015px;
}
@media only screen and (max-width: 1919px) {
  .about-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 815px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 600px;
  }
}
@media only screen and (max-width: 991px) {
  .about-area-4 .section-title-wrapper {
    grid-template-columns: 1fr 430px;
  }
}
@media only screen and (max-width: 767px) {
  .about-area-4 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}
.about-area-4 .section-title {
  max-width: 885px;
}
@media only screen and (max-width: 1919px) {
  .about-area-4 .section-title {
    max-width: 785px;
  }
}
@media only screen and (max-width: 1399px) {
  .about-area-4 .section-title {
    max-width: 585px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-4 .section-title {
    max-width: 455px;
  }
}
@media only screen and (max-width: 767px) {
  .about-area-4 .section-title {
    max-width: 100%;
  }
}
.about-area-4 .thumb {
  margin-top: 80px;
}
@media only screen and (max-width: 1919px) {
  .about-area-4 .thumb {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .about-area-4 .thumb {
    margin-top: 50px;
  }
}
.about-area-4 .thumb img {
  width: 100%;
}

/* service area 5 style  */
.service-area-5 .section-header {
  border-top: 1px solid var(--border);
  padding-top: 35px;
}
.service-area-5 .section-header .subtitle-wrapper {
  margin-top: 9px;
}
.service-area-5 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1015px;
}
@media only screen and (max-width: 1919px) {
  .service-area-5 .section-title-wrapper {
    grid-template-columns: 1fr 815px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area-5 .section-title-wrapper {
    grid-template-columns: 1fr 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-area-5 .section-title-wrapper {
    grid-template-columns: 1fr 600px;
  }
}
@media only screen and (max-width: 991px) {
  .service-area-5 .section-title-wrapper {
    grid-template-columns: 1fr 430px;
  }
}
@media only screen and (max-width: 767px) {
  .service-area-5 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}
.service-area-5 .section-title {
  max-width: 483px;
}
@media only screen and (max-width: 1919px) {
  .service-area-5 .section-title {
    max-width: 383px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area-5 .section-title {
    max-width: 300px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-area-5 .section-title {
    max-width: 250px;
  }
}
@media only screen and (max-width: 767px) {
  .service-area-5 .section-title {
    max-width: 100%;
  }
}
.service-area-5 .services-wrapper-box {
  margin-top: 87px;
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1015px;
}
@media only screen and (max-width: 1919px) {
  .service-area-5 .services-wrapper-box {
    grid-template-columns: 1fr 815px;
    margin-top: 57px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area-5 .services-wrapper-box {
    grid-template-columns: 1fr 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .service-area-5 .services-wrapper-box {
    grid-template-columns: 1fr 600px;
    margin-top: 47px;
  }
}
@media only screen and (max-width: 991px) {
  .service-area-5 .services-wrapper-box {
    grid-template-columns: 1fr 430px;
  }
}
@media only screen and (max-width: 991px) {
  .service-area-5 .services-wrapper-box {
    grid-template-columns: 1fr;
  }
}
.service-area-5 .services-wrapper-box .info-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  max-width: 280px;
}
@media only screen and (max-width: 1399px) {
  .service-area-5 .services-wrapper-box .info-text {
    font-size: 16px;
  }
}

.services-wrapper-5 {
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.services-wrapper-5 .service-box {
  border-bottom: 1px solid var(--border);
  padding-top: 21px;
  padding-bottom: 29px;
  display: grid;
  gap: 15px 30px;
  grid-template-columns: 120px 1fr 295px;
  pointer-events: auto;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-5 .service-box {
    padding-top: 11px;
    padding-bottom: 19px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-5 .service-box {
    grid-template-columns: 80px 1fr 225px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-5 .service-box {
    grid-template-columns: 60px 1fr 205px;
  }
}
@media (max-width: 575px) {
  .services-wrapper-5 .service-box {
    grid-template-columns: 1fr;
  }
}
.services-wrapper-5 .service-box:hover .thumb img {
  max-width: 100%;
}
.services-wrapper-5 .service-box:hover .text {
  opacity: 1;
  height: 100%;
}
.services-wrapper-5 .service-box .number {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-5 .service-box .number {
    font-size: 16px;
  }
}
.services-wrapper-5 .service-box .title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-5 .service-box .title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-5 .service-box .title {
    font-size: 24px;
  }
}
.services-wrapper-5 .service-box .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  margin-top: 28px;
  opacity: 0;
  max-height: 0px;
  transition: opacity 0.3s, height 0.5s;
  max-width: 370px;
}
@media only screen and (max-width: 1919px) {
  .services-wrapper-5 .service-box .text {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 1399px) {
  .services-wrapper-5 .service-box .text {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-5 .service-box .text {
    opacity: 1;
    max-height: 100%;
  }
}
.services-wrapper-5 .service-box .count {
  margin-top: 2px;
}
.services-wrapper-5 .service-box .thumb {
  margin-top: 8px;
  text-align: right;
}
@media (max-width: 575px) {
  .services-wrapper-5 .service-box .thumb {
    text-align: left;
  }
}
.services-wrapper-5 .service-box .thumb img {
  border-radius: 15px;
  width: 100%;
  max-width: 165px;
  height: auto;
  transition: all 0.5s;
}
@media only screen and (max-width: 1199px) {
  .services-wrapper-5 .service-box .thumb img {
    width: 100%;
  }
}

/* cta area 4 style  */
.cta-area-4 .section-header {
  margin-top: 78px;
}
@media only screen and (max-width: 1919px) {
  .cta-area-4 .section-header {
    margin-top: 58px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-4 .section-header {
    margin-top: 38px;
  }
}
.cta-area-4 .section-title {
  font-size: 140px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.05em;
  padding-bottom: 34px;
  position: relative;
  display: inline-flex;
}
@media only screen and (max-width: 1919px) {
  .cta-area-4 .section-title {
    font-size: 120px;
    padding-bottom: 24px;
  }
}
@media only screen and (max-width: 1399px) {
  .cta-area-4 .section-title {
    font-size: 110px;
  }
}
@media only screen and (max-width: 1199px) {
  .cta-area-4 .section-title {
    font-size: 90px;
    padding-bottom: 14px;
  }
}
@media only screen and (max-width: 991px) {
  .cta-area-4 .section-title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .cta-area-4 .section-title {
    font-size: 40px;
  }
}
.cta-area-4 .section-title:hover::before {
  width: 0;
}
.cta-area-4 .section-title:hover .icon .first {
  transform: translate(100%, -100%);
}
.cta-area-4 .section-title:hover .icon .second {
  transform: translate(0%, 0%);
}
.cta-area-4 .section-title::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  bottom: 0px;
  width: 100%;
  height: 5px;
  background-color: currentColor;
  transition: 0.3s;
}
@media only screen and (max-width: 1199px) {
  .cta-area-4 .section-title::before {
    height: 3px;
  }
}
.cta-area-4 .section-title .icon {
  --white-space: 0.07em;
  margin-left: 24px;
  display: inline-block;
  line-height: 0;
  position: relative;
  overflow: hidden;
  transform: translate(0, var(--white-space));
}
@media only screen and (max-width: 1199px) {
  .cta-area-4 .section-title .icon {
    margin-left: 19px;
  }
}
@media (max-width: 575px) {
  .cta-area-4 .section-title .icon {
    margin-left: 14px;
  }
}
.cta-area-4 .section-title .icon .first {
  transition: all 0.3s;
  width: 0.72em;
  box-sizing: content-box;
  padding: var(--white-space);
}
.cta-area-4 .section-title .icon .second {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-100%, 100%);
  transition: all 0.3s;
  width: 0.72em;
  box-sizing: content-box;
  padding: var(--white-space);
}
.cta-area-4 .section-title br {
  display: block;
}

/* reveal animation style  */
.img_anim_reveal {
  visibility: hidden;
  overflow: hidden;
}
.img_anim_reveal img {
  object-fit: cover;
  transform-origin: top;
}

/* portfolio agency page css */
.body-portfolio-agency {
  background-color: #F8F8F8;
}
@media (min-width: 1870px) {
  .body-portfolio-agency .container.large {
    max-width: 1870px;
  }
}

.hero-area-6 {
  overflow-x: clip;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-area-6 .section-content-wrapper {
  display: grid;
  gap: 40px 50px;
  grid-template-columns: 1220px 1fr;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6 .section-content-wrapper {
    grid-template-columns: 850px 1fr;
    gap: 40px 30px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-6 .section-content-wrapper {
    grid-template-columns: 750px 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-6 .section-content-wrapper {
    grid-template-columns: 600px 1fr;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}
.hero-area-6 .hero-video-wrapper {
  padding-right: 50px;
  padding-top: 30px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6 .hero-video-wrapper {
    padding-right: 30px;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .hero-video-wrapper {
    padding-left: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .hero-video-wrapper {
    padding-top: 0;
  }
}
.hero-area-6 .hero-video-wrapper .text {
  font-size: 20px;
  color: var(--primary);
  max-width: 330px;
  line-height: 28px;
  padding-top: 70px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6 .hero-video-wrapper .text {
    padding-top: 50px;
    max-width: 100%;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-6 .hero-video-wrapper .text {
    padding-top: 50px;
    max-width: 100%;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-6 .hero-video-wrapper .text {
    font-size: 18px;
    padding-top: 20px;
    line-height: 25px;
    max-width: 100%;
  }
}
.hero-area-6 .hero-video-wrapper .hero-video {
  border-radius: 15px;
  overflow: hidden;
}
.hero-area-6 .hero-video-wrapper .hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-area-6-wrapper {
  margin-top: 230px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6-wrapper {
    margin-top: 200px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-6-wrapper {
    margin-top: 170px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-6-wrapper {
    margin-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-6-wrapper {
    margin-top: 120px;
  }
}
.hero-area-6-wrapper::before {
  content: "";
  position: absolute;
  left: 0px;
  top: -35px;
  width: 1px;
  height: calc(100% + 70px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6-wrapper::before {
    top: -15px;
    height: calc(100% + 30px);
  }
}
.hero-area-6-wrapper::after {
  content: "";
  position: absolute;
  right: 0px;
  top: -35px;
  width: 1px;
  height: calc(100% + 70px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6-wrapper::after {
    top: -15px;
    height: calc(100% + 30px);
  }
}
.hero-area-6-wrapper__line {
  position: relative;
}
.hero-area-6-wrapper__line::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -35px;
  height: 1px;
  width: calc(100% + 70px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6-wrapper__line::before {
    left: -15px;
    width: calc(100% + 30px);
  }
}
.hero-area-6-wrapper__line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -35px;
  height: 1px;
  width: calc(100% + 70px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6-wrapper__line::after {
    left: -15px;
    width: calc(100% + 30px);
  }
}
.hero-area-6 .section-content {
  position: relative;
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .section-content {
    overflow: hidden;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-content {
    padding-top: 30px;
  }
}
.hero-area-6 .section-content::before {
  content: "";
  position: absolute;
  right: 0;
  top: -30px;
  width: 1px;
  height: calc(100% + 60px);
  background-color: var(--border);
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .section-content::before {
    display: none;
  }
}
.hero-area-6 .section-title {
  font-size: 220px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -15.4px;
  text-transform: uppercase;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6 .section-title {
    font-size: 160px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area-6 .section-title {
    font-size: 130px;
    letter-spacing: -10px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-6 .section-title {
    font-size: 105px;
    letter-spacing: -5px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-6 .section-title {
    font-size: 90px;
    letter-spacing: -5px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-title {
    font-size: 60px;
    letter-spacing: 0;
  }
}
@media (max-width: 575px) {
  .hero-area-6 .section-title {
    font-size: 45px;
    letter-spacing: 0;
  }
}
.hero-area-6 .section-title > * {
  display: block;
  font-weight: 600;
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (max-width: 1919px) {
  .hero-area-6 .section-title > * {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-title > * {
    padding-left: 25px;
    padding-right: 10px;
  }
}
.hero-area-6 .section-title > *:last-child {
  font-style: italic;
  font-family: var(--font_tartuffo);
  text-align: right;
  margin-right: 30px;
  position: relative;
}
@media (max-width: 575px) {
  .hero-area-6 .section-title > *:last-child {
    text-align: left;
  }
}
.hero-area-6 .section-title > *:nth-child(2) {
  position: relative;
}
.hero-area-6 .section-title > *:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0px;
  height: 1px;
  width: calc(100% + 0px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-title > *:nth-child(2)::before {
    display: none;
  }
}
.hero-area-6 .section-title > *:nth-child(2)::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0px;
  height: 1px;
  width: calc(100% + 0px);
  background-color: var(--border);
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-title > *:nth-child(2)::after {
    display: none;
  }
}
.hero-area-6 .section-title .plus {
  font-weight: 600;
  font-family: var(--font_bdogrotesk);
  font-style: normal;
  padding-right: 40px;
}
@media only screen and (max-width: 767px) {
  .hero-area-6 .section-title .plus {
    padding-right: 20px;
  }
}
@media (max-width: 575px) {
  .hero-area-6 .section-title .plus {
    padding-right: 0;
  }
}

/* work area 4 style  */
.work-area-6-inner {
  padding-top: 150px;
}
@media only screen and (max-width: 991px) {
  .work-area-6-inner {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .work-area-6-inner {
    padding-top: 100px;
  }
}
.work-area-6 .works-wrapper-box {
  margin-top: 29px;
}
@media only screen and (max-width: 1399px) {
  .work-area-6 .works-wrapper-box {
    margin-top: 9px;
  }
}

.works-wrapper-6 {
  display: grid;