/*-----------------------------------------------------------------------------------

  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");
@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --primary: #eb1b1b;
  --secondary: #555555;
  --border: rgba(17, 17, 17, 0.1);
  --bg: #101010;
  --theme: #0095c8;
  --black: #101010;
  --black-2: #999999;
  --white: #FFFFFF;
  --white-2: #999999;
  --action: #0095c8;
}

:root .dark {
  --primary: #ffffff;
  --secondary: #999999;
  --border: rgba(255, 255, 255, 0.1);
  --bg: #171717;
}



/*----------------------------------------*/
/* typography css  */
/*----------------------------------------*/
/* dm sans  */
/* instrument sans  */
/* Thunder  */

/* ------------------------------
   SUPPLY FONT FAMILY
--------------------------------*/
/* =========================
   SUPPLY FONT FAMILY
   (assets/css/style.css → ../fonts/)
   ========================= */


   @font-face {
  font-family: 'TwentyThree';
  src: url('../fonts/TwentyThree-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Supply';
  src: url('../fonts/Supply-UltraLight.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Supply';
  src: url('../fonts/Supply-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Supply';
  src: url('../fonts/Supply-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Supply';
  src: url('../fonts/Supply-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Supply';
  src: url('../fonts/Supply-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica-Light";
  src: url("../fonts/helvetica-light-587ebe5a59211.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "Helvetica-Light";
  src: url("../fonts/helvetica-light-587ebe5a59211.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "Helvetica-Light";
  src: url("../fonts/helvetica-light-587ebe5a59211.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "Helvetica-Light";
  src: url("../fonts/helvetica-light-587ebe5a59211.ttf");
  font-weight: 200;
}







@font-face {
  font-family: "Helvetica-Light";
  src: url("../fonts/helvetica-light-587ebe5a59211.ttf");
  font-weight: 200;
}

@font-face {
  font-family: "Helvetica-Bold";
  src: url("../fonts/Helvetica-Bold.ttf");
  font-weight: 900;
}

@font-face {
  font-family: "Euro";
  src: url("../fonts/EurostileExt-Bla.otf");
  font-weight: 700;
}
@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;
}

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

/* times now  */
@font-face {
  font-family: "TimesNow-SemiLightItalic";
  src: url("../fonts/TimesNow-SemiLightItalic.ttf");
  font-weight: 400;
}

/* bdo grotesk  */
@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-Medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: "BDOGrotesk-Regular";
  src: url("../fonts/BDOGrotesk-DemiBold.ttf");
  font-weight: 600;
}

/* tartufffo trial */
@font-face {
  font-family: "Tartuffo_Trial";
  src: url("../fonts/Tartuffo_Trial-Thin.otf");
  font-weight: 100;
}

@font-face {
  font-family: "Tartuffo_Trial";
  src: url("../fonts/Tartuffo_Trial-LightItalic.otf");
  font-weight: 300;
}

@font-face {
  font-family: "Tartuffo_Trial";
  src: url("../fonts/Tartuffo_Trial-Light.otf");
  font-weight: 300;
}

@font-face {
  font-family: "tartuffo-font-family-family";
  src: url("../fonts/Tartuffo_Trial-MediumItalic.otf");
  font-weight: 500;
}

:root {
  --font_Helveticabold: "Helvetica-Bold";
  --font_Helveticalight: "Helvetica-Light";
  --font_dmsans: "DM Sans", sans-serif;
  --font_instrumentsans: "Instrument Sans", sans-serif;
  --font_thunder: "Thunder";
  --font_sequelsansromanbody: "Sequel Sans Roman Body";
  --font_sequelsansmediumbody: "Sequel Sans Medium Body";
  --font_timesnow: "TimesNow-SemiLightItalic";
  --font_bdogrotesk: "BDOGrotesk-Regular";
  --font_tartuffo: "tartuffo-font-family";
  --font_tartuffotrial: "Tartuffo_Trial";
  --font_awesome: "Font Awesome 6 Free";
}

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

.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_dmsans);
  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_Helveticabold);
  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: none;
}

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

.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;
  inset: 0;                         /* shorthand for top/right/bottom/left:0 */
  z-index: 900;                     /* below panel, above page */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);  /* subtle dark tint */
  backdrop-filter: blur(10px);      /* glass blur effect */
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.offcanvas-overlay.overlay-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.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 {
  max-width: 120px;
}

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

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

.mobile-menu.mean-container .mean-nav ul li a.mean-expand {
  width: 100%;
  height: 48px;
  justify-content: end;
  font-weight: 300;
  border: none !important;
  background: 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 {
  opacity: 1;
}

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

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

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

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

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

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

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

.mobile-menu.mean-container .mean-bar {
  padding: 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);
}

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

.service-area .service-box .content h3.title {
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700; /* adjust if your Euro font has different weights */
  letter-spacing: 0.02em; /* optional, for a sharper look */
}

/*----------------------------------------*/
/* 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: none;
  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: 30px;
  bottom: 30px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100px);
  transition: all 300ms linear;
}

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

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

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

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

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

.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: #fff;
  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(252, 247, 243, 0.1);
  background-color: transparent;
}

.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: "\f107";
  font-family: var(--font_awesome);
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}

.main-menu .mega-menu {
  background-color: var(--black);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  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: none;
}

.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 1010px 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: none;
  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-creative-agency {
  position: relative;
  z-index: 100;
  background-color: #FCF7F3;
}

.body-creative-agency.dark {
  --primary: #FCF7F3;
}

.body-creative-agency.dark .rr-btn::before {
  background-color: var(--black);
}

.body-creative-agency.dark .rr-btn.btn-border-white {
  border-color: rgba(17, 17, 17, 0);
}

.body-creative-agency.dark .header-area-2 .side-toggle {
  background-color: #29282800;
}

.body-creative-agency .body-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}

.body-creative-agency .body-bg img {
  width: 100%;
}

@media (min-width: 1850px) {
  .body-creative-agency .container.large {
    max-width: 1850px;
    --container-max-widths: 1820px;
  }
}

.body-creative-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-creative-agency .section-title {
    font-size: 110px;
  }
}

.body-creative-agency .rr-btn::before {
  background-color: #FCF7F3;
}

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

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

.works-wrapper-2 .work-box .thumb:hover .t-btn {
  opacity: 1;
}

.works-wrapper-2 .work-box .thumb img {
  width: 100%;
  cursor: none;
}

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

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

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

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

@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: #FCF7F3;
  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: #FCF7F3;
}

.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: #FCF7F3;
  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: #FCF7F3;
}

.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: #FCF7F3;
}

.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: #FCF7F3;
}

.testimonial-area .testimonial-item .name {
  font-size: 20px;
  font-weight: 310;
  line-height: 27px;
  letter-spacing: -0.07em;
  color: #FCF7F3;
}

.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: #FCF7F3;
  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: #FCF7F3;
  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;
  }
}

/* circular shape area style  */
.circular-shape-wrapper {
  height: 100vh;
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circular-shape-wrapper .shape-thumb img {
  transform: scale(1) rotate(0);
  opacity: 0.9;
}

/* award area style  */
.award-area {
  background-color: #FCF7F3;
  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: #FCF7F3;
}

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

.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: #FCF7F3;
}

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

.dark .body-startup-agency .header-area-5 .side-toggle {
  background-color: #1D1C1C;
}

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

.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 {
  margin-left: 45px;
  display: grid;
  gap: 85px 10px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-6 {
    gap: 65px 10px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-6 {
    gap: 45px 10px;
  }
}

@media only screen and (max-width: 767px) {
  .works-wrapper-6 {
    grid-template-columns: repeat(1, 1fr);
  }

  .works-wrapper-6>* {
    grid-column: span 1 !important;
  }
}

.works-wrapper-6>*:nth-child(1) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(2) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(3) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(4) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(5) {
  grid-column: span 2;
}

@media only screen and (max-width: 991px) {
  .works-wrapper-6>*:nth-child(6) {
    grid-column: span 2;
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-6>*:nth-child(7) {
    grid-column: span 2;
  }
}

.works-wrapper-6>*:nth-child(8) {
  grid-column: span 4;
}

.works-wrapper-6>*:nth-child(9) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(10) {
  grid-column: span 2;
}

.works-wrapper-6>*:nth-child(11) {
  grid-column: span 2;
}

@media only screen and (max-width: 991px) {
  .works-wrapper-6>*:nth-child(12) {
    grid-column: span 2;
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-6>*:nth-child(13) {
    grid-column: span 2;
  }
}

.works-wrapper-6 .work-box .thumb {
  border-radius: 15px;
  overflow: hidden;
}

.works-wrapper-6 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  transform: scale(0.9);
}

.works-wrapper-6 .work-box .thumb .image img {
  transform-origin: center;
}

.works-wrapper-6 .work-box .thumb img {
  width: 100%;
  cursor: none;
}

.works-wrapper-6 .work-box .content {
  margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-6 .work-box .content {
    margin-top: 14px;
  }
}

.works-wrapper-6 .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-6 .work-box .title {
    font-size: 18px;
  }
}

.works-wrapper-6 .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-6 .work-box .tag {
    font-size: 18px;
  }
}

.works-wrapper-6 .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-6 .work-box .date {
    font-size: 18px;
  }
}

/* portfolio page css */
.body-portfolio-agency .header-area-7 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  right: 0;
}

.portfolio {
  width: 100vw;
  height: 100vh;
}

.portfolio__item {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.8s cubic-bezier(0.37, 0.23, 0, 0.96);
}

.portfolio__content {
  z-index: 9;
  left: 50px;
  bottom: 200px;
  position: absolute;
}

@media (max-width: 575px) {
  .portfolio__content {
    top: 120px;
    left: 30px;
  }
}

.portfolio__content-title {
  opacity: 0;
  font-size: 100px;
  line-height: 1.05;
  color: var(--white);
  transform: translateY(-130px);
}

.portfolio__content-title a:hover {
  color: var(--white);
}

@media (max-width: 575px) {
  .portfolio__content-title {
    font-size: 60px;
  }
}

.portfolio__list {
  opacity: 0;
  display: flex;
  margin-top: 40px;
  align-items: center;
  transform: translateY(-150px);
}

.portfolio__list li a {
  font-size: 14px;
  border-radius: 20px;
  padding: 10px 17px;
  border-radius: 20px;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.portfolio .swiper-slide {
  overflow: hidden;
}

.portfolio-activ {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.portfolio .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.portfolio .swiper-slide-active .portfolio__item {
  animation-name: qodef-animate-slide-out;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.portfolio .swiper-slide-active .portfolio__content-title {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2200ms ease;
}

.portfolio .swiper-slide-active .portfolio__list {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2000ms ease;
}

.portfolio__slider__arrow {
  gap: 40px;
  right: 50px;
  bottom: 50px;
  z-index: 99;
  display: flex;
  position: absolute;
  align-items: center;
}

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

@media only screen and (max-width: 767px) {
  .portfolio__slider__arrow {
    left: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio__slider__arrow {
    left: 30px;
  }
}

.portfolio__slider__arrow-prev,
.portfolio__slider__arrow-next {
  gap: 8px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--white);
}

.portfolio .portfolio-pagination {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 9;
  display: inline-block;
}

@media (max-width: 575px) {
  .portfolio .portfolio-pagination {
    left: 30px;
  }
}

.portfolio .swiper-pagination-bullet {
  width: 150px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1199px) {
  .portfolio .swiper-pagination-bullet {
    width: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio .swiper-pagination-bullet {
    width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio .swiper-pagination-bullet {
    width: 70px;
    bottom: 45px;
  }
}

@media (max-width: 575px) {
  .portfolio .swiper-pagination-bullet {
    width: 40px;
  }
}

.portfolio .swiper-pagination-bullet::before {
  content: "";
  width: 150px;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 9;
  left: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.portfolio .swiper-pagination-bullet::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 8;
  left: 0;
  background-color: white;
}

.portfolio .swiper-pagination-bullet-active::after {
  opacity: 1;
  width: 100%;
}

.portfolio-2 .line-effect {
  top: 0;
  left: 0;
  gap: 10px;
  width: 100vh;
  height: 50vw;
  display: flex;
  position: absolute;
  flex-direction: column;
  transition: 0.8s ease-in-out;
  transform-origin: bottom left;
  transform: translateY(-100%) rotate(90deg);
}

@media (max-width: 575px) {
  .portfolio-2 .line-effect {
    gap: 1px;
  }
}

.portfolio-2 .line:nth-child(1) {
  height: 1px;
}

.portfolio-2 .line:nth-child(2) {
  height: 5px;
}

.portfolio-2 .line:nth-child(3) {
  height: 10px;
}

.portfolio-2 .line:nth-child(4) {
  height: 20px;
}

.portfolio-2 .line:nth-child(5) {
  height: 30px;
}

.portfolio-2 .line:nth-child(6) {
  height: 40px;
}

.portfolio-2 .line:nth-child(7) {
  height: 50px;
}

.portfolio-2 .line:nth-child(8) {
  height: 60px;
}

.portfolio-2 .line:nth-child(9) {
  height: 70px;
}

.portfolio-2 .line:nth-child(10) {
  height: 80px;
}

.portfolio-2 .line:nth-child(11) {
  height: 90px;
}

.portfolio-2 .line:nth-child(12) {
  height: 100px;
}

.portfolio-2 .line:nth-child(13) {
  height: 100px;
}

.portfolio-2 .line:nth-child(14) {
  height: 100px;
}

.portfolio-2 .line:nth-child(15) {
  height: 100px;
}

.portfolio-2 .line:nth-child(16) {
  height: 100px;
}

.portfolio-2 .line:nth-child(17) {
  height: 100px;
}

.portfolio-2 .line:nth-child(18) {
  height: 100px;
}

.portfolio-2 .line:nth-child(19) {
  height: 100px;
}

.portfolio-2 .line:nth-child(20) {
  height: 100px;
}

.portfolio-2 .line {
  width: 100%;
  background: #fff;
  transition: transform 0.8s ease-in-out, height 0.5s ease-in-out;
  transform-origin: center;
}

.portfolio-2 .swiper-slide-active .line {
  transform: scaleY(0);
}

.portfolio-2 .swiper-slide-active .line-effect {
  transform: scaleY(-50px);
}

.portfolio-2__item {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.8s cubic-bezier(0.37, 0.23, 0, 0.96);
}

.portfolio-2__content {
  z-index: 9;
  left: 50px;
  bottom: 200px;
  position: absolute;
}

@media (max-width: 575px) {
  .portfolio-2__content {
    top: 120px;
    left: 30px;
  }
}

.portfolio-2__content-title {
  opacity: 0;
  font-size: 100px;
  line-height: 1.05;
  color: var(--white);
  transform: translateY(-130px);
}

.portfolio-2__content-title a:hover {
  color: var(--white);
}

@media (max-width: 575px) {
  .portfolio-2__content-title {
    font-size: 60px;
  }
}

.portfolio-2__list {
  opacity: 0;
  display: flex;
  margin-top: 40px;
  align-items: center;
  transform: translateY(-150px);
}

.portfolio-2__list li a {
  font-size: 14px;
  border-radius: 20px;
  padding: 10px 17px;
  border-radius: 20px;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.portfolio-2 .swiper-slide-active .portfolio-2__item {
  animation-name: qodef-animate-slide-out;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.portfolio-2 .swiper-slide-active .portfolio-2__content-title {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2200ms ease;
}

.portfolio-2 .swiper-slide-active .portfolio-2__list {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2000ms ease;
}

.portfolio-2__slider__arrow {
  gap: 40px;
  right: 50px;
  bottom: 50px;
  z-index: 99;
  display: flex;
  position: absolute;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .portfolio-2__slider__arrow {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-2__slider__arrow {
    left: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio-2__slider__arrow {
    left: 30px;
  }
}

.portfolio-2__slider__arrow-prev,
.portfolio-2__slider__arrow-next {
  gap: 8px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--white);
}

.portfolio-2 .portfolio-2-pagination {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 9;
  display: inline-block;
}

@media (max-width: 575px) {
  .portfolio-2 .portfolio-2-pagination {
    left: 30px;
  }
}

.portfolio-2 .swiper-pagination-bullet {
  width: 150px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1199px) {
  .portfolio-2 .swiper-pagination-bullet {
    width: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-2 .swiper-pagination-bullet {
    width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-2 .swiper-pagination-bullet {
    width: 70px;
    bottom: 45px;
  }
}

.portfolio-2 .swiper-pagination-bullet::before {
  content: "";
  width: 150px;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 9;
  left: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.portfolio-2 .swiper-pagination-bullet::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 8;
  left: 0;
  background-color: white;
}

.portfolio-2 .swiper-pagination-bullet-active::after {
  opacity: 1;
  width: 100%;
}

.portfolio-3__item {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.8s cubic-bezier(0.37, 0.23, 0, 0.96);
}

.portfolio-3 .grid-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.portfolio-3 .grid-mask div {
  background-color: var(--white);
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease-in-out;
}

.portfolio-3 .swiper-slide-active .grid-mask div {
  opacity: 0;
}

.portfolio-3__content {
  z-index: 9;
  left: 50px;
  bottom: 200px;
  position: absolute;
}

@media (max-width: 575px) {
  .portfolio-3__content {
    top: 120px;
    left: 30px;
  }
}

.portfolio-3__content-title {
  opacity: 0;
  font-size: 100px;
  line-height: 1.05;
  color: var(--white);
  transform: translateY(-130px);
}

.portfolio-3__content-title a:hover {
  color: var(--white);
}

@media (max-width: 575px) {
  .portfolio-3__content-title {
    font-size: 60px;
  }
}

.portfolio-3__list {
  opacity: 0;
  display: flex;
  margin-top: 40px;
  align-items: center;
  transform: translateY(-150px);
}

.portfolio-3__list li a {
  font-size: 14px;
  border-radius: 20px;
  padding: 10px 17px;
  border-radius: 20px;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.portfolio-3 .swiper-slide-active .portfolio-3__item {
  animation-name: qodef-animate-slide-out;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.portfolio-3 .swiper-slide-active .portfolio-3__content-title {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2200ms ease;
}

.portfolio-3 .swiper-slide-active .portfolio-3__list {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2000ms ease;
}

.portfolio-3__slider__arrow {
  gap: 40px;
  right: 50px;
  bottom: 50px;
  z-index: 99;
  display: flex;
  position: absolute;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .portfolio-3__slider__arrow {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-3__slider__arrow {
    left: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio-3__slider__arrow {
    left: 30px;
  }
}

.portfolio-3__slider__arrow-prev,
.portfolio-3__slider__arrow-next {
  gap: 8px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--white);
}

.portfolio-3 .portfolio-3-pagination {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 9;
  display: inline-block;
}

@media (max-width: 575px) {
  .portfolio-3 .portfolio-3-pagination {
    left: 30px;
  }
}

.portfolio-3 .swiper-pagination-bullet {
  width: 150px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1199px) {
  .portfolio-3 .swiper-pagination-bullet {
    width: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-3 .swiper-pagination-bullet {
    width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-3 .swiper-pagination-bullet {
    width: 70px;
    bottom: 45px;
  }
}

.portfolio-3 .swiper-pagination-bullet::before {
  content: "";
  width: 150px;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 9;
  left: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.portfolio-3 .swiper-pagination-bullet::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 8;
  left: 0;
  background-color: white;
}

.portfolio-3 .swiper-pagination-bullet-active::after {
  opacity: 1;
  width: 100%;
}

.portfolio-4 .slider {
  min-height: 50vh;
}

.portfolio-4 .slider .swiper-slide {
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
}

.portfolio-4 .slider .swiper-slide .slide-inner {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
}

.portfolio-4 .slider .swiper-slide .slide-inner img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.portfolio-4 .swiper-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.portfolio-4__content {
  z-index: 9;
  left: 50px;
  bottom: 200px;
  position: absolute;
}

@media (max-width: 575px) {
  .portfolio-4__content {
    top: 120px;
    left: 30px;
  }
}

.portfolio-4__content-title {
  opacity: 0;
  font-size: 100px;
  line-height: 1.05;
  color: var(--white);
  transform: translateY(-130px);
}

.portfolio-4__content-title a:hover {
  color: var(--white);
}

@media (max-width: 575px) {
  .portfolio-4__content-title {
    font-size: 60px;
  }
}

.portfolio-4__list {
  opacity: 0;
  display: flex;
  margin-top: 40px;
  align-items: center;
  transform: translateY(-150px);
}

.portfolio-4__list li a {
  font-size: 14px;
  border-radius: 20px;
  padding: 10px 17px;
  border-radius: 20px;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.portfolio-4 .swiper-slide-active .portfolio-4__item {
  animation-name: qodef-animate-slide-out;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.portfolio-4 .swiper-slide-active .portfolio-4__content-title {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2200ms ease;
}

.portfolio-4 .swiper-slide-active .portfolio-4__list {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2000ms ease;
}

.portfolio-4__slider {
  width: 100vw;
  height: 100vh;
}

.portfolio-4__slider__arrow {
  gap: 40px;
  right: 50px;
  bottom: 50px;
  z-index: 99;
  display: flex;
  position: absolute;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .portfolio-4__slider__arrow {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-4__slider__arrow {
    left: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio-4__slider__arrow {
    left: 30px;
  }
}

.portfolio-4__slider__arrow-prev,
.portfolio-4__slider__arrow-next {
  gap: 8px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--white);
}

.portfolio-4 .portfolio-4-pagination {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 9;
  display: flex;
  gap: 15px;
  top: inherit;
  right: 0;
  transform: inherit;
}

@media (max-width: 575px) {
  .portfolio-4 .portfolio-4-pagination {
    left: 30px;
  }
}

.portfolio-4 .swiper-pagination-bullet {
  width: 150px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1199px) {
  .portfolio-4 .swiper-pagination-bullet {
    width: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-4 .swiper-pagination-bullet {
    width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-4 .swiper-pagination-bullet {
    width: 70px;
    bottom: 45px;
  }
}

.portfolio-4 .swiper-pagination-bullet::before {
  content: "";
  width: 150px;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 9;
  left: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.portfolio-4 .swiper-pagination-bullet::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 8;
  left: 0;
  background-color: white;
}

.portfolio-4 .swiper-pagination-bullet-active::after {
  opacity: 1;
  width: 100%;
}

.portfolio-5 {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-width: 100vw;
}

.portfolio-5__item {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.portfolio-5__content {
  z-index: 9;
  left: 50px;
  bottom: 200px;
  position: absolute;
}

@media (max-width: 575px) {
  .portfolio-5__content {
    top: 120px;
    left: 30px;
  }
}

.portfolio-5__content-title {
  opacity: 0;
  font-size: 100px;
  line-height: 1.05;
  color: var(--white);
}

.portfolio-5__content-title a:hover {
  color: var(--white);
}

@media (max-width: 575px) {
  .portfolio-5__content-title {
    font-size: 60px;
  }
}

.portfolio-5__list {
  opacity: 0;
  display: flex;
  margin-top: 40px;
  align-items: center;
  transform: translateY(-150px);
}

.portfolio-5__list li a {
  font-size: 14px;
  border-radius: 20px;
  padding: 10px 17px;
  border-radius: 20px;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.portfolio-5 .swiper-slide-active .portfolio-5__item {
  animation-name: qodef-animate-slide-out;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.portfolio-5 .swiper-slide-active .portfolio-5__content-title {
  transition: all 2200ms ease;
  animation: slideFadeIn 2.2s ease forwards;
}

.portfolio-5 .swiper-slide-active .portfolio-5__list {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2000ms ease;
}

.portfolio-5__slider {
  width: 100vw;
  height: 100vh;
}

.portfolio-5__slider__arrow {
  gap: 40px;
  right: 50px;
  bottom: 50px;
  z-index: 99;
  display: flex;
  position: absolute;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .portfolio-5__slider__arrow {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-5__slider__arrow {
    left: 50px;
  }
}

@media (max-width: 575px) {
  .portfolio-5__slider__arrow {
    left: 30px;
  }
}

.portfolio-5__slider__arrow-prev,
.portfolio-5__slider__arrow-next {
  gap: 8px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--white);
}

.portfolio-5 .swiper {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-width: 100vw;
}

.portfolio-5 img {
  margin: 0 !important;
  padding: 0 !important;
}

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

.portfolio-5 .portfolio-5-pagination {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 9;
  display: flex;
  gap: 15px;
  top: inherit;
  right: 0;
  transform: inherit;
}

@media (max-width: 575px) {
  .portfolio-5 .portfolio-5-pagination {
    left: 30px;
  }
}

.portfolio-5 .swiper-pagination-bullet {
  width: 150px;
  height: 10px;
  display: inline-block;
  margin: 0 5px;
  overflow: hidden;
  transition: 0.4s;
  position: relative;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1199px) {
  .portfolio-5 .swiper-pagination-bullet {
    width: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .portfolio-5 .swiper-pagination-bullet {
    width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-5 .swiper-pagination-bullet {
    width: 70px;
    bottom: 45px;
  }
}

.portfolio-5 .swiper-pagination-bullet::before {
  content: "";
  width: 150px;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 9;
  left: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.portfolio-5 .swiper-pagination-bullet::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  transition: 0.6s;
  z-index: 8;
  left: 0;
  background-color: white;
}

.portfolio-5 .swiper-pagination-bullet-active::after {
  opacity: 1;
  width: 100%;
}

/* parallax carousal page css */
.body-parallax-carosole .header-area-8 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  right: 0;
}

.parallax-slider-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
  align-items: center;
  justify-content: flex-start;
}

.parallax-slider-inner {
  gap: 10px;
  width: 100%;
  height: 100vh;
  display: flex;
  padding-top: 80px;
  align-items: center;
  justify-content: flex-start;
}

.parallax-slider-item {
  width: 500px;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-size: cover;
}

.parallax-slider-item img {
  height: 80%;
  min-width: 750px;
  object-fit: cover;
  margin-left: -50px;
  background-size: cover;
  background-position: center;
  cursor: none;
}

.parallax-slider-item .content {
  margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
  .parallax-slider-item .content {
    margin-top: 14px;
  }
}

.parallax-slider-item .title {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.05em;
}

@media only screen and (max-width: 1199px) {
  .parallax-slider-item .title {
    font-size: 18px;
  }
}

.parallax-slider-item .tag {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  letter-spacing: -0.05em;
  font-family: var(--font_bdogrotesk);
}

@media only screen and (max-width: 1199px) {
  .parallax-slider-item .tag {
    font-size: 18px;
  }
}

.parallax-slider-item .date {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  letter-spacing: -0.05em;
  font-family: var(--font_bdogrotesk);
}

@media only screen and (max-width: 1199px) {
  .parallax-slider-item .date {
    font-size: 18px;
  }
}

/* portfolio showcase page css */
@media (min-width: 1650px) {
  .body-portfolio-showcase .container.large {
    max-width: 1650px;
  }
}

.body-portfolio-showcase.dark .header-area-2 .side-toggle {
  background-color: #1D1C1C;
}

.body-portfolio-showcase .header-area-2 .side-toggle {
  background-color: #F3F3F3;
}

.body-portfolio-showcase .footer-area-4 .footer-widget-wrapper-box {
  margin-top: 0px;
}

/* work area 5 style  */
.work-area-5 .works-wrapper-box {
  border-top: 1px solid var(--border);
  margin-top: 80px;
  padding-top: 70px;
  color: #000 !important;
}

@media only screen and (max-width: 1919px) {
  .work-area-5 .works-wrapper-box {
    padding-top: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-area-5 .works-wrapper-box {
    padding-top: 40px;
  }
}

.works-wrapper-5 {
  display: grid;
  gap: 40px 40px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-5 {
    gap: 30px 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 {
    gap: 20px 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .works-wrapper-5 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.works-wrapper-5>*.span-2 {
  grid-column: span 2;
}

.works-wrapper-5>*.grid-column-start-1 {
  grid-column-start: 1;
}

@media only screen and (max-width: 991px) {
  .works-wrapper-5>*.grid-column-start-1 {
    grid-column-start: auto;
  }
}

.works-wrapper-5>*.grid-column-start-2 {
  grid-column-start: 2;
}

@media only screen and (max-width: 991px) {
  .works-wrapper-5>*.grid-column-start-2 {
    grid-column-start: auto;
  }
}

.works-wrapper-5>*.grid-column-start-3 {
  grid-column-start: 3;
}

@media only screen and (max-width: 991px) {
  .works-wrapper-5>*.grid-column-start-3 {
    grid-column-start: auto;
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-5>*:nth-child(n) {
    grid-column-start: auto;
  }
}

.works-wrapper-5 .work-box {
  min-height: 375px;
}

.works-wrapper-5 .work-box .thumb {
  border-radius: 15px;
  overflow: hidden;
}

.works-wrapper-5 .work-box .thumb img {
  width: 100%;
}

.works-wrapper-5 .section-header {
  margin-top: -8px;
}

.works-wrapper-5 .section-header .section-title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.05em;
  max-width: 440px;
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-5 .section-header .section-title {
    font-size: 30px;
    max-width: 370px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 .section-header .section-title {
    font-size: 24px;
    max-width: 300px;
  }
}

.works-wrapper-5 .section-header .header-shape-1 {
  margin-top: 44px;
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 .section-header .header-shape-1 {
    margin-top: 24px;
  }
}

.works-wrapper-5 .section-header .header-shape-1 img {
  width: 65px;
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-5 .section-header .header-shape-1 img {
    width: 55px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 .section-header .header-shape-1 img {
    width: 45px;
  }
}

.works-wrapper-5 .services-wrapper-box {
  margin-top: -7px;
  margin-bottom: -6px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: space-between;
}

.works-wrapper-5 .services-wrapper-box .subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.works-wrapper-5 .service-box .title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.05em;
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-5 .service-box .title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-5 .service-box .title {
    font-size: 24px;
  }
}

.works-wrapper-5 .service-box .title a:hover {
  color: var(--secondary);
}

.card-wrap {
  transform: perspective(700px);
  transform-style: preserve-3d;
  cursor: pointer;
  max-height: 375px;
  position: relative;
}

.card-wrap:hover .card-bg {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
}

.card-wrap:hover .card {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1);
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 10px;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  will-change: transform;
  border: none;
}

.card-bg {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 110%;
  height: 110%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}

/* portfolio showcase 2 page css */
@media (min-width: 1850px) {
  .body-modern-agency .container.large {
    max-width: 1850px;
  }
}

.body-modern-agency .rr-btn {
  padding: 15px 27px;
}

.body-modern-agency .section-subtitle {
  font-family: var(--font_tartuffotrial);
  font-weight: 100;
  font-size: 20px;
  line-height: 26px;
  text-transform: none;
}

.body-modern-agency .footer-area-3 .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
}

/* hero area 7 style  */
.hero-area-7 .section-title {
  font-weight: 100;
  font-size: 140px;
  line-height: 0.93;
  text-align: center;
  max-width: 1115px;
  margin-inline: auto;
}

@media only screen and (max-width: 1919px) {
  .hero-area-7 .section-title {
    font-size: 110px;
    max-width: 915px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-area-7 .section-title {
    font-size: 90px;
    max-width: 715px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-7 .section-title {
    font-size: 70px;
    max-width: 615px;
  }
}

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

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

@media (max-width: 575px) {
  .hero-area-7 .section-title {
    font-size: 40px;
  }
}

.hero-area-7 .section-title span {
  color: rgba(17, 17, 17, 0.3);
}

.dark .hero-area-7 .section-title span {
  color: rgba(255, 255, 255, 0.3);
}

.hero-area-7 .section-content {
  text-align: center;
}

.hero-area-7 .section-content .text {
  font-family: var(--font_tartuffotrial);
  font-weight: 100;
  font-size: 36px;
  line-height: 1.11;
  color: var(--primary);
  max-width: 620px;
  text-align: center;
  margin-inline: auto;
}

@media only screen and (max-width: 1919px) {
  .hero-area-7 .section-content .text {
    font-size: 30px;
    max-width: 520px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-area-7 .section-content .text {
    font-size: 24px;
    max-width: 420px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-area-7 .section-content .text {
    font-size: 20px;
    max-width: 420px;
  }
}

.hero-area-7 .section-content .text-wrapper {
  margin-top: 45px;
}

@media only screen and (max-width: 1919px) {
  .hero-area-7 .section-content .text-wrapper {
    margin-top: 35px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-7 .section-content .text-wrapper {
    margin-top: 25px;
  }
}

.hero-area-7 .section-content .btn-wrapper {
  margin-top: 33px;
}

@media only screen and (max-width: 1199px) {
  .hero-area-7 .section-content .btn-wrapper {
    margin-top: 23px;
  }
}

.hero-area-7 .section-title-wrapper {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 80px;
  padding-top: 61px;
  padding-bottom: 55px;
}

@media only screen and (max-width: 1919px) {
  .hero-area-7 .section-title-wrapper {
    padding-top: 51px;
    padding-bottom: 45px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-7 .section-title-wrapper {
    padding-top: 31px;
    padding-bottom: 25px;
  }
}

/* work area 7 style  */
.work-area-7 .works-wrapper-box {
  margin-top: 50px;
}

@media only screen and (max-width: 1919px) {
  .work-area-7 .works-wrapper-box {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-area-7 .works-wrapper-box {
    margin-top: 30px;
  }
}

.works-wrapper-7 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

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

.works-wrapper-7>* {
  border-top: 1px solid var(--border);
  padding: 150px;
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-7>* {
    padding: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-7>* {
    padding: 40px;
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-7>* {
    padding: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .works-wrapper-7>* {
    padding: 10px;
  }
}

.works-wrapper-7>*:nth-child(1) {
  border-top: 0;
}

.works-wrapper-7>*:nth-child(2) {
  border-top: 0;
}

@media (max-width: 575px) {
  .works-wrapper-7>*:nth-child(2) {
    border-top: 1px solid var(--border);
  }
}

.works-wrapper-7>*:nth-child(2n+1) {
  border-right: 1px solid var(--border);
}

@media (max-width: 575px) {
  .works-wrapper-7>*:nth-child(2n+1) {
    border-right: 0;
  }
}

.works-wrapper-7 .work-box .thumb {
  position: relative;
}

.works-wrapper-7 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
}

.works-wrapper-7 .work-box .thumb .image img {
  transform-origin: center;
}

.works-wrapper-7 .work-box .thumb img {
  width: 100%;
  cursor: none;
}

.works-wrapper-7 .work-box .content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  visibility: hidden;
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-7 .work-box .content {
    visibility: visible;
  }
}

.works-wrapper-7 .work-box .title {
  font-weight: 300;
  font-size: 30px;
  line-height: 0.9;
  background-color: var(--white);
  padding: 15px 20px 13px;
  color: var(--black);
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-7 .work-box .title {
    font-size: 26px;
    padding: 10px 15px 8px;
  }
}

.works-wrapper-7 .work-box .meta {
  font-family: var(--font_tartuffotrial);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 1.69;
  background-color: var(--white);
  display: inline-block;
  padding: 5px 15px 3px;
  margin-top: 3px;
  color: var(--black);
}

.works-wrapper-7 .btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 50px 0;
}

.works-wrapper-7 .btn-wrapper a {
  font-family: var(--font_tartuffotrial);
  font-weight: 100;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
  color: var(--primary);
  max-width: 225px;
  text-decoration: none;
  display: inline-block;
}

@media only screen and (max-width: 1399px) {
  .works-wrapper-7 .btn-wrapper a {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .works-wrapper-7 .btn-wrapper a {
    font-size: 26px;
    max-width: 165px;
  }
}

@media only screen and (max-width: 991px) {
  .works-wrapper-7 .btn-wrapper a {
    font-size: 20px;
    max-width: 135px;
  }
}

.works-wrapper-7 .btn-wrapper a:hover .underline {
  background-size: 0% 100%;
}

.works-wrapper-7 .btn-wrapper .underline {
  width: 100%;
  background-image: linear-gradient(transparent calc(100% - 1px), var(--primary) 1px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  background-position: 0 -6px;
}

@media only screen and (max-width: 1399px) {
  .works-wrapper-7 .btn-wrapper .underline {
    background-position: 0 -2px;
  }
}

/* capabilities area 2 style  */
.capabilities-area-2 .section-content-wrapper {
  margin-top: 14px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 1235px;
  margin-bottom: 31px;
}

@media only screen and (max-width: 1919px) {
  .capabilities-area-2 .section-content-wrapper {
    grid-template-columns: 1fr 950px;
  }
}

@media only screen and (max-width: 1399px) {
  .capabilities-area-2 .section-content-wrapper {
    grid-template-columns: 1fr 800px;
  }
}

@media only screen and (max-width: 1199px) {
  .capabilities-area-2 .section-content-wrapper {
    grid-template-columns: 1fr 600px;
  }
}

@media only screen and (max-width: 991px) {
  .capabilities-area-2 .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.capabilities-area-2 .section-content {
  margin-top: 27px;
}

@media only screen and (max-width: 1919px) {
  .capabilities-area-2 .section-content {
    margin-top: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .capabilities-area-2 .section-content {
    margin-top: 7px;
  }
}

.capabilities-area-2 .section-content .section-title-wrapper {
  display: block;
}

@media only screen and (max-width: 767px) {
  .capabilities-area-2 .capability-wrapper {
    border-top: 1px solid var(--border);
  }
}

@media only screen and (max-width: 767px) {
  .capabilities-area-2 .capability-box {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    padding-top: 20px;
  }
}

.capabilities-area-2 .capability-box-inner {
  display: grid;
  gap: 10px 60px;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 575px) {
  .capabilities-area-2 .capability-box-inner {
    grid-template-columns: 1fr;
  }
}

.capabilities-area-2 .capability-box:hover .thumb img,
.capabilities-area-2 .capability-box.active .thumb img {
  opacity: 1;
  transform: scale(1);
}

.capabilities-area-2 .capability-box .title {
  font-weight: 100;
  font-size: 100px;
  line-height: 1.1;
}

@media only screen and (max-width: 1919px) {
  .capabilities-area-2 .capability-box .title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .capabilities-area-2 .capability-box .title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .capabilities-area-2 .capability-box .title {
    font-size: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .capabilities-area-2 .capability-box .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .capabilities-area-2 .capability-box .title {
    font-size: 35px;
  }
}

.capabilities-area-2 .capability-box .title.rr-btn-underline {
  padding-bottom: 0;
  color: rgba(17, 17, 17, 0.3);
  text-transform: unset;
}

.dark .capabilities-area-2 .capability-box .title.rr-btn-underline {
  color: rgba(255, 255, 255, 0.3);
}

.capabilities-area-2 .capability-box .title.rr-btn-underline::before {
  height: 3px;
  transition: 0.5s;
  bottom: 9px;
}

@media only screen and (max-width: 1919px) {
  .capabilities-area-2 .capability-box .title.rr-btn-underline::before {
    bottom: 6px;
  }
}

@media only screen and (max-width: 1199px) {
  .capabilities-area-2 .capability-box .title.rr-btn-underline::before {
    height: 2px;
    bottom: 3px;
  }
}

.capabilities-area-2 .capability-box .thumb {
  display: flex;
  gap: 10px;
}

@media only screen and (max-width: 1919px) {
  .capabilities-area-2 .capability-box .thumb {
    gap: 10px;
  }
}

.capabilities-area-2 .capability-box .thumb img {
  width: 76px;
  height: 76px;
  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-2 .capability-box .thumb img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }
}

@media only screen and (max-width: 1399px) {
  .capabilities-area-2 .capability-box .thumb img {
    width: 50px;
    height: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .capabilities-area-2 .capability-box .thumb img {
    width: 40px;
    height: 40px;
    opacity: 1;
    transform: scale(1);
  }
}

/* award area 3 style  */
.award-area-3 .section-header {
  margin-top: 19px;
}

.award-area-3 .section-title {
  max-width: 855px;
  text-indent: 2.3em;
}

@media only screen and (max-width: 1919px) {
  .award-area-3 .section-title {
    max-width: 755px;
  }
}

@media only screen and (max-width: 1399px) {
  .award-area-3 .section-title {
    max-width: 555px;
  }
}

@media only screen and (max-width: 1199px) {
  .award-area-3 .section-title {
    max-width: 505px;
  }
}

@media only screen and (max-width: 991px) {
  .award-area-3 .section-title {
    max-width: 635px;
  }
}

.award-area-3 .section-title span {
  position: relative;
  padding: 0 32px;
}

@media only screen and (max-width: 1919px) {
  .award-area-3 .section-title span {
    padding: 0 22px;
  }
}

@media only screen and (max-width: 1399px) {
  .award-area-3 .section-title span {
    padding: 0 17px;
  }
}

@media (max-width: 575px) {
  .award-area-3 .section-title span {
    padding: 0;
  }
}

.award-area-3 .section-title span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 72%;
  border: 2px solid var(--primary);
  border-radius: 100px;
  top: 53%;
  left: 0;
  transform: translate(0, -50%);
  z-index: -1;
}

@media only screen and (max-width: 1399px) {
  .award-area-3 .section-title span:before {
    border-width: 1px;
  }
}

@media (max-width: 575px) {
  .award-area-3 .section-title span:before {
    display: none;
  }
}

.award-area-3 .award-wrapper-box {
  max-width: 1235px;
  margin-left: auto;
  margin-top: 85px;
}

@media only screen and (max-width: 1919px) {
  .award-area-3 .award-wrapper-box {
    max-width: 1000px;
    margin-top: 55px;
  }
}

@media only screen and (max-width: 1399px) {
  .award-area-3 .award-wrapper-box {
    max-width: 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .award-area-3 .award-wrapper-box {
    max-width: 750px;
    margin-top: 45px;
  }
}

.award-area-3 .award-wrapper {
  border-top: 1px solid var(--border);
}

.award-area-3 .award-box {
  border-bottom: 1px solid var(--border);
  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-3 .award-box {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .award-area-3 .award-box {
    grid-template-columns: 180px 1fr 100px;
  }
}

@media only screen and (max-width: 767px) {
  .award-area-3 .award-box {
    grid-template-columns: 1fr 1fr;
  }
}

.award-area-3 .award-box:hover {
  background-color: #F9F9F9;
}

.dark .award-area-3 .award-box:hover {
  background-color: #171717;
}

@media only screen and (max-width: 767px) {
  .award-area-3 .award-box:hover {
    background-color: transparent;
  }
}

.award-area-3 .award-box:hover .category {
  transform: translateX(30px);
}

@media only screen and (max-width: 767px) {
  .award-area-3 .award-box:hover .category {
    transform: translateX(0px);
  }
}

.award-area-3 .award-box:hover .year {
  transform: translateX(-30px);
}

@media only screen and (max-width: 767px) {
  .award-area-3 .award-box:hover .year {
    transform: translateX(0px);
  }
}

.award-area-3 .award-box .category {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: var(--primary);
  transition: all 0.5s;
}

.award-area-3 .award-box .award {
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .award-area-3 .award-box .award {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .award-area-3 .award-box .award {
    order: 3;
    grid-column: span 2;
  }
}

.award-area-3 .award-box .year {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: var(--primary);
  transition: all 0.5s;
  text-align: right;
}

/* cta area 5 style  */
.cta-area-5-inner {
  overflow: hidden;
}

.cta-area-5 .section-title {
  font-size: 200px;
  font-weight: 100;
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
}

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

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

@media only screen and (max-width: 1199px) {
  .cta-area-5 .section-title {
    margin-left: 0;
  }
}

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

@media (max-width: 575px) {
  .cta-area-5 .section-title {
    font-size: 40px;
  }
}

.cta-area-5 .section-title a {
  display: inline-flex;
  align-items: center;
}

.cta-area-5 .section-title .line {
  width: 0.7em;
  height: 0.05em;
  background-color: var(--primary);
  display: inline-block;
  align-self: center;
  margin-left: 0.3em;
  margin-right: 0.2em;
}

.cta-area-5 .section-header {
  margin-top: 45px;
  margin-bottom: 87px;
}

@media only screen and (max-width: 1919px) {
  .cta-area-5 .section-header {
    margin-top: 25px;
    margin-bottom: 67px;
  }
}

@media only screen and (max-width: 1399px) {
  .cta-area-5 .section-header {
    margin-top: 5px;
    margin-bottom: 47px;
  }
}

.cta-area-5 .section-header .title-wrapper {
  animation: 45s t-slide infinite linear;
}

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

/* 404 page css */
.error-area-inner {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.error-area .section-subtitle {
  font-family: var(--font_sequelsansmediumbody);
  font-size: 300px;
  font-weight: 315;
  line-height: 0.7;
  letter-spacing: -0.07em;
}

@media only screen and (max-width: 1919px) {
  .error-area .section-subtitle {
    font-size: 240px;
  }
}

@media only screen and (max-width: 1399px) {
  .error-area .section-subtitle {
    font-size: 180px;
  }
}

@media only screen and (max-width: 1199px) {
  .error-area .section-subtitle {
    font-size: 140px;
  }
}

@media only screen and (max-width: 991px) {
  .error-area .section-subtitle {
    font-size: 120px;
  }
}

.error-area .section-title {
  max-width: 740px;
}

@media only screen and (max-width: 1919px) {
  .error-area .section-title {
    max-width: 640px;
  }
}

@media only screen and (max-width: 1399px) {
  .error-area .section-title {
    max-width: 540px;
  }
}

@media only screen and (max-width: 1199px) {
  .error-area .section-title {
    max-width: 440px;
  }
}

@media only screen and (max-width: 991px) {
  .error-area .section-title {
    max-width: 340px;
  }
}

.error-area .section-content {
  align-self: center;
}

.error-area .section-content .title-wrapper {
  margin-top: 37px;
}

@media only screen and (max-width: 1919px) {
  .error-area .section-content .title-wrapper {
    margin-top: 27px;
  }
}

@media only screen and (max-width: 1199px) {
  .error-area .section-content .title-wrapper {
    margin-top: 17px;
  }
}

.error-area .section-content .btn-wrapper {
  margin-top: 64px;
}

@media only screen and (max-width: 1919px) {
  .error-area .section-content .btn-wrapper {
    margin-top: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  .error-area .section-content .btn-wrapper {
    margin-top: 34px;
  }
}

@media only screen and (max-width: 991px) {
  .error-area .section-content .btn-wrapper {
    margin-top: 24px;
  }
}

/* about page css */
.about-area-details {
  /* moving gallery style  */
}

.about-area-details .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .about-area-details .section-header {
    padding-top: 7px;
  }
}

.about-area-details .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area-details .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area-details .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .about-area-details .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.about-area-details .subtitle-wrapper {
  margin-top: 8px;
}

.about-area-details .section-title {
  max-width: 1030px;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-title {
    max-width: 840px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area-details .section-title {
    max-width: 640px;
  }
}

.about-area-details .section-content .text {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.26;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-content .text {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area-details .section-content .text {
    font-size: 20px;
  }
}

.about-area-details .section-content .text:not(:first-child) {
  margin-top: 38px;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-content .text:not(:first-child) {
    margin-top: 28px;
  }
}

.about-area-details .section-content .btn-wrapper {
  margin-top: 61px;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-content .btn-wrapper {
    margin-top: 41px;
  }
}

.about-area-details .info-list li {
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  font-family: var(--font_sequelsansromanbody);
  position: relative;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .info-list li {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area-details .info-list li {
    font-size: 20px;
  }
}

.about-area-details .info-list li:not(:first-child) {
  margin-top: 4px;
}

.about-area-details .info-list li:before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  margin-right: 10px;
}

@media only screen and (max-width: 1399px) {
  .about-area-details .info-list li:before {
    width: 4px;
    height: 4px;
  }
}

.about-area-details .section-content-wrapper {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: 64px;
  max-width: 1235px;
  margin-left: auto;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 715px;
}

@media only screen and (max-width: 1919px) {
  .about-area-details .section-content-wrapper {
    margin-top: 54px;
    max-width: 1000px;
    grid-template-columns: 1fr 565px;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area-details .section-content-wrapper {
    margin-top: 44px;
    max-width: 850px;
    grid-template-columns: 1fr 465px;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area-details .section-content-wrapper {
    max-width: 750px;
  }
}

@media only screen and (max-width: 991px) {
  .about-area-details .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.about-area-details .wrapper-gallery {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 50px;
  padding: 0;
}

.about-area-details .moving-gallery li {
  width: 40vw;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  list-style: none;
}

@media only screen and (max-width: 1199px) {
  .about-area-details .moving-gallery li {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.about-area-details .moving-gallery li img {
  height: auto;
  margin: 0px;
  width: 100%;
}

.about-area-details .moving-gallery li:first-child {
  padding-left: 0px;
}

.about-area-details .moving-gallery li:last-child {
  padding-right: 0px;
}

.about-area-details .moving-gallery li:nth-child(1) {
  width: 30vw;
}

@media (max-width: 575px) {
  .about-area-details .moving-gallery li:nth-child(1) {
    width: 60vw;
  }
}

.about-area-details .moving-gallery li:nth-child(2) {
  width: 25vw;
}

@media (max-width: 575px) {
  .about-area-details .moving-gallery li:nth-child(2) {
    width: 50vw;
  }
}

.about-area-details .moving-gallery li:nth-child(3) {
  width: 20vw;
}

@media (max-width: 575px) {
  .about-area-details .moving-gallery li:nth-child(3) {
    width: 40vw;
  }
}

.about-area-details .moving-gallery li:nth-child(4) {
  width: 25vw;
}

@media (max-width: 575px) {
  .about-area-details .moving-gallery li:nth-child(4) {
    width: 50vw;
  }
}

.about-area-details .moving-gallery li:nth-child(5) {
  width: 30vw;
}

@media (max-width: 575px) {
  .about-area-details .moving-gallery li:nth-child(5) {
    width: 60vw;
  }
}

/* approach area about page style  */
.approach-area-about-page .section-title {
  max-width: 845px;
}

@media only screen and (max-width: 1919px) {
  .approach-area-about-page .section-title {
    max-width: 645px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-about-page .section-title {
    max-width: 545px;
  }
}

.approach-area-about-page .subtitle-wrapper {
  margin-top: 8px;
}

.approach-area-about-page .section-header {
  margin-top: 50px;
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .approach-area-about-page .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.approach-area-about-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .approach-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .approach-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.approach-area-about-page .approach-wrapper-box {
  max-width: 1235px;
  margin-left: auto;
  margin-top: 81px;
  margin-bottom: 43px;
}

@media only screen and (max-width: 1919px) {
  .approach-area-about-page .approach-wrapper-box {
    max-width: 1000px;
    margin-top: 61px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-about-page .approach-wrapper-box {
    max-width: 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .approach-area-about-page .approach-wrapper-box {
    max-width: 750px;
    margin-right: 0;
    margin-top: 41px;
  }
}

.approach-area-about-page .approach-wrapper {
  display: grid;
  gap: 40px 50px;
  grid-template-columns: 1fr 1fr auto;
}

@media only screen and (max-width: 767px) {
  .approach-area-about-page .approach-wrapper {
    grid-template-columns: 1fr;
  }
}

.approach-area-about-page .approach-box .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  display: flex;
  gap: 0 20px;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 1919px) {
  .approach-area-about-page .approach-box .title {
    font-size: 24px;
  }
}

.approach-area-about-page .approach-box .title img {
  width: 250px;
}

@media only screen and (max-width: 1919px) {
  .approach-area-about-page .approach-box .title img {
    width: 200px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-about-page .approach-box .title img {
    width: 150px;
  }
}

@media only screen and (max-width: 1199px) {
  .approach-area-about-page .approach-box .title img {
    display: none;
  }
}

.approach-area-about-page .approach-box .approach-list {
  margin-top: 28px;
}

@media only screen and (max-width: 1199px) {
  .approach-area-about-page .approach-box .approach-list {
    margin-top: 18px;
  }
}

.approach-area-about-page .approach-box .approach-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
}



.info-area-page-about .section-header {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 50px;
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .info-area-page-about .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.info-area-page-about .section-header .subtitle-wrapper {
  margin-top: 8px;
}

.info-area-page-about .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .info-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .info-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .info-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .info-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.info-area-page-about .section-subtitle {
  color: var(--white);
}

.info-area-page-about .section-title {
  color: var(--white);
  max-width: 805px;
}

.info-area-page-about .counter-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .info-area-page-about .counter-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .info-area-page-about .counter-wrapper-box {
    margin-top: 44px;
  }
}

.info-area-page-about .counter-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px) {
  .info-area-page-about .counter-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .info-area-page-about .counter-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.info-area-page-about .funfact-item {
  padding: 39px 50px 41px;
  border-radius: 20px;
  background-color: #1D1C1C;
}

@media only screen and (max-width: 1919px) {
  .info-area-page-about .funfact-item {
    padding: 29px 30px 31px;
  }
}

@media only screen and (max-width: 1199px) {
  .info-area-page-about .funfact-item {
    padding: 19px 20px 21px;
  }
}

.info-area-page-about .funfact-item .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #999999;
}

.info-area-page-about .funfact-item .number {
  font-size: 50px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--white);
  margin-top: 14px;
}

@media only screen and (max-width: 1199px) {
  .info-area-page-about .funfact-item .number {
    font-size: 35px;
  }
}

/* client area page about style  */
.client-area-page-about {
  margin-bottom: -1px;
}

.client-area-page-about .section-header {
  margin-top: 39px;
}

.client-area-page-about .section-header .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  max-width: 340px;
  color: #FCF7F3;
  margin-inline: auto;
}

.client-area-page-about .clients-wrapper-box {
  margin-top: 63px;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1199px) {
  .client-area-page-about .clients-wrapper-box {
    margin-top: 43px;
  }
}

.client-area-page-about .clients-wrapper {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.client-area-page-about .clients-wrapper .client-slider-active .swiper-slide {
  width: auto;
}

.client-area-page-about .clients-wrapper .client-slider-active .swiper-wrapper {
  transition-timing-function: linear !important;
}

.client-area-page-about .client-box {
  
  width: 300px;
  height: 140px;
  padding: 0 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1919px) {
  .client-area-page-about .client-box {
    width: 155px;
    height: 90px;
  }
}

@media only screen and (max-width: 1399px) {
  .client-area-page-about .client-box {
    width: 135px;
    height: 70px;
  }
}

/* media area page about style  */
.media-area-page-about {
  background-color: var(--bg);
}

.media-area-page-about .section-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 575px;
}

@media only screen and (max-width: 1399px) {
  .media-area-page-about .section-content-wrapper {
    grid-template-columns: 1fr 475px;
  }
}

@media only screen and (max-width: 991px) {
  .media-area-page-about .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.media-area-page-about .area-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-area-page-about .section-content {
  padding: 87px 50px 100px;
  background-color: #1D1C1C;
}

@media only screen and (max-width: 1399px) {
  .media-area-page-about .section-content {
    padding: 37px 40px 40px;
  }
}

@media only screen and (max-width: 767px) {
  .media-area-page-about .section-content {
    padding: 17px 20px 20px;
  }
}

.media-area-page-about .section-content .section-title {
  font-size: 30px;
  font-weight: 310;
  line-height: 35px;
  letter-spacing: -0.07em;
  color: var(--white);
  max-width: 310px;
}

.media-area-page-about .section-content .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #999999;
}

.media-area-page-about .section-content .text-wrapper {
  margin-top: 267px;
}

@media only screen and (max-width: 1919px) {
  .media-area-page-about .section-content .text-wrapper {
    margin-top: 167px;
  }
}

@media only screen and (max-width: 1399px) {
  .media-area-page-about .section-content .text-wrapper {
    margin-top: 67px;
  }
}

@media only screen and (max-width: 991px) {
  .media-area-page-about .section-content .text-wrapper {
    margin-top: 27px;
  }
}

.media-area-page-about .section-content .btn-wrapper {
  margin-top: 43px;
}

.media-area-page-about .section-content .rr-btn {
  background-color: #1D1C1C;
  border-color: rgba(255, 255, 255, 0.2);
}

.media-area-page-about .section-content .rr-btn:hover {
  border-color: var(--white);
}

.dark .media-area-page-about .section-content .rr-btn:before {
  background-color: var(--white);
}

.media-area-page-about .section-content .rr-btn .text-one {
  color: var(--white);
}

.media-area-page-about .section-content .rr-btn .text-two {
  color: var(--black);
}

.dark .media-area-page-about .section-content .rr-btn .text-two {
  color: var(--black);
}

/* award area page about style  */
.award-area-page-about {
  background-color: var(--bg);
}

.award-area-page-about .section-subtitle {
  color: var(--white);
}

.award-area-page-about .section-title {
  color: var(--white);
}

.award-area-page-about .section-header {
  margin-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .award-area-page-about .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.award-area-page-about .section-header .subtitle-wrapper {
  margin-top: 8px;
}

.award-area-page-about .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .award-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .award-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .award-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .award-area-page-about .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.award-area-page-about .awards-wrapper-box {
  margin-top: 94px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
  max-width: 1235px;
  margin-left: auto;
  margin-bottom: 43px;
}

@media only screen and (max-width: 1919px) {
  .award-area-page-about .awards-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .award-area-page-about .awards-wrapper-box {
    margin-top: 44px;
  }
}

.award-area-page-about .awards-wrapper {
  max-width: 630px;
  margin-left: auto;
}

.award-area-page-about .award-box {
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 1fr 370px;
}

@media only screen and (max-width: 767px) {
  .award-area-page-about .award-box {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 575px) {
  .award-area-page-about .award-box {
    grid-template-columns: 1fr;
  }
}

.award-area-page-about .award-box:not(:first-child) {
  margin-top: 56px;
}

.award-area-page-about .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(--white);
}

@media only screen and (max-width: 767px) {
  .award-area-page-about .award-box .award-list li {
    font-size: 18px;
  }
}

.award-area-page-about .award-box .category {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--white);
}

@media only screen and (max-width: 767px) {
  .award-area-page-about .award-box .category {
    font-size: 18px;
  }
}

/* team area about page style  */
.team-area-about-page .section-header {
  margin-top: 50px;
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .team-area-about-page .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.team-area-about-page .section-header .subtitle-wrapper {
  margin-top: 8px;
}

.team-area-about-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .team-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .team-area-about-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.team-area-about-page .section-title {
  max-width: 765px;
}

@media only screen and (max-width: 1919px) {
  .team-area-about-page .section-title {
    max-width: 665px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-area-about-page .section-title {
    max-width: 465px;
  }
}

.team-area-about-page .team-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .team-area-about-page .team-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .team-area-about-page .team-wrapper-box {
    margin-top: 44px;
  }
}

.team-area-about-page .team-wrapper {
  display: grid;
  gap: 40px 20px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px) {
  .team-area-about-page .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .team-area-about-page .team-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.team-area-about-page .team-box:hover .thumb img {
  transform: scale(1.1);
}

.team-area-about-page .team-box .thumb {
  overflow: hidden;
}

.team-area-about-page .team-box .thumb img {
  width: 100%;
  transition: all 0.5s;
}

.team-area-about-page .team-box .name {
  font-size: 30px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
}

@media only screen and (max-width: 1919px) {
  .team-area-about-page .team-box .name {
    font-size: 24px;
  }
}

.team-area-about-page .team-box .post {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  display: inline-block;
  margin-top: 3px;
}

.team-area-about-page .team-box .content {
  margin-top: 19px;
}

/* blog details page css */
.blog-details-area .section-title {
  max-width: 1130px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-area .section-title {
    max-width: 930px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-title {
    max-width: 730px;
  }
}

.blog-details-area .section-header {
  margin-top: 17px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-header {
    margin-top: 37px;
  }
}

.blog-details-area .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 36px;
}

@media only screen and (max-width: 1199px) {
  .blog-details-area .meta {
    margin-top: 9px;
  }
}

.blog-details-area .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
  display: inline-block;
}

.blog-details-area .meta span.has-left-line {
  padding-inline-start: 15px;
}

.blog-details-area .meta span.has-left-line:before {
  width: 10px;
}

.blog-details-area .meta .name span {
  font-weight: 500;
  color: var(--primary);
}

.blog-details-area .image-wrapper {
  margin-top: 89px;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1919px) {
  .blog-details-area .image-wrapper {
    margin-top: 59px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-details-area .image-wrapper {
    margin-top: 29px;
    margin-bottom: 30px;
  }
}

.blog-details-area .section-details .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.blog-details-area .section-details .text:not(:first-child) {
  margin-top: 26px;
}

.blog-details-area .section-details .title {
  font-size: 50px;
  font-weight: 310;
  line-height: 0.7;
  letter-spacing: -0.07em;
  margin-bottom: 28px;
}

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

@media only screen and (max-width: 1199px) {
  .blog-details-area .section-details .title {
    font-size: 30px;
    margin-bottom: 23px;
  }
}

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

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

.blog-details-area .section-details .details-info {
  margin-top: 50px;
}

@media only screen and (max-width: 767px) {
  .blog-details-area .section-details .details-info {
    margin-top: 40px;
  }
}

.blog-details-area .section-details .text-wrapper+.details-info {
  margin-top: 43px;
}

@media only screen and (max-width: 767px) {
  .blog-details-area .section-details .text-wrapper+.details-info {
    margin-top: 33px;
  }
}

.blog-details-area .section-details .thumb-text-wrapper {
  margin-top: 17px;
  display: grid;
  gap: 20px 30px;
  grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 991px) {
  .blog-details-area .section-details .thumb-text-wrapper {
    grid-template-columns: 1fr;
  }
}

.blog-details-area .section-details .thumb-text-wrapper .thumb {
  margin-top: 6px;
}

.blog-details-area .section-details .thumb-text-wrapper .thumb img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.blog-details-area .section-details .feature-list {
  margin-top: 26px;
  margin-bottom: 26px;
}

.blog-details-area .section-details .feature-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  position: relative;
  padding-left: 27px;
}

.blog-details-area .section-details .feature-list li:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  left: 11px;
  top: 10px;
}

.blog-details-area .section-details .gallery-wrapper {
  margin-top: 24px;
  margin-bottom: 20px;
  display: grid;
  gap: 30px;
  grid-template-columns: auto auto;
}

@media only screen and (max-width: 1199px) {
  .blog-details-area .section-details .gallery-wrapper {
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-details-area .section-details .gallery-wrapper {
    gap: 10px;
  }
}

.blog-details-area .section-details .gallery-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-details-area .section-details .tags-wrapper {
  margin-top: 62px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-details .tags-wrapper {
    margin-top: 42px;
  }
}

.blog-details-area .section-details .tags-wrapper .heading {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  display: inline-block;
}

.blog-details-area .section-details .tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.blog-details-area .section-details .tags .tag {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  display: inline-block;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 30px;
}

.blog-details-area .section-details .comment-wrap {
  margin-top: 90px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-details .comment-wrap {
    margin-top: 60px;
  }
}

.blog-details-area .section-details .comment-formwrap {
  display: grid;
  gap: 60px 30px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 52px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-details .comment-formwrap {
    gap: 40px 30px;
    margin-top: 32px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-details-area .section-details .comment-formwrap {
    gap: 30px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-details-area .section-details .comment-formwrap {
    grid-template-columns: repeat(1, 1fr);
  }
}

.blog-details-area .section-details .comment-formwrap .message {
  grid-column: span 2;
}

@media only screen and (max-width: 767px) {
  .blog-details-area .section-details .comment-formwrap .message {
    grid-column: auto;
  }
}

.blog-details-area .section-details .comment-formfield input {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  outline: none;
  background-color: transparent;
  transition: all 0.5s;
  color: var(--primary);
  font-size: 18px;
}

.dark .blog-details-area .section-details .comment-formfield input {
  border-color: rgba(255, 255, 255, 0.2);
}

@media only screen and (max-width: 1199px) {
  .blog-details-area .section-details .comment-formfield input {
    font-size: 16px;
  }
}

.blog-details-area .section-details .comment-formfield input:focus {
  border-color: var(--primary);
}

.blog-details-area .section-details .comment-formfield input::placeholder {
  color: var(--primary);
}

.blog-details-area .section-details .comment-formfield input:-webkit-autofill,
.blog-details-area .section-details .comment-formfield input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

.blog-details-area .section-details .comment-formfield select {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid var(--primary);
  outline: none;
  background-color: transparent;
  transition: all 0.5s;
  color: var(--primary);
}

.blog-details-area .section-details .comment-formfield select:focus {
  border-color: var(--primary);
}

.blog-details-area .section-details .comment-formfield select option {
  width: 100%;
  max-width: 100%;
}

.blog-details-area .section-details .submit-btn {
  margin-top: 50px;
}

@media only screen and (max-width: 1399px) {
  .blog-details-area .section-details .submit-btn {
    margin-top: 40px;
  }
}

/* blog area 3 style  */
.blog-area-3 .section-header {
  margin-top: 50px;
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .blog-area-3 .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.blog-area-3 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-3 .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-3 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.blog-area-3 .subtitle-wrapper {
  margin-top: 8px;
}

.blog-area-3 .section-title {
  max-width: 800px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .section-title {
    max-width: 700px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-3 .section-title {
    max-width: 640px;
  }
}

.blog-area-3 .blogs-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .blogs-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-3 .blogs-wrapper-box {
    margin-top: 44px;
  }
}

.blog-area-3 .blogs-wrapper {
  display: grid;
  gap: 76px 60px;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .blogs-wrapper {
    gap: 46px 40px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-3 .blogs-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .blog-area-3 .blogs-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.blog-area-3 .blogs-wrapper>* {
  grid-column: span 2;
}

@media only screen and (max-width: 991px) {
  .blog-area-3 .blogs-wrapper>* {
    grid-column: auto;
  }
}

.blog-area-3 .blogs-wrapper>*:nth-child(4),
.blog-area-3 .blogs-wrapper>*:nth-child(5) {
  grid-column: span 3;
}

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

  .blog-area-3 .blogs-wrapper>*:nth-child(4),
  .blog-area-3 .blogs-wrapper>*:nth-child(5) {
    grid-column: auto;
  }
}

.blog-area-3 .blogs-wrapper>*:nth-child(4) .content,
.blog-area-3 .blogs-wrapper>*:nth-child(5) .content {
  padding-right: 130px;
}

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

  .blog-area-3 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-3 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 100px;
  }
}

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

  .blog-area-3 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-3 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 80px;
  }
}

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

  .blog-area-3 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-3 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 0;
  }
}

.blog-area-3 .blogs-wrapper>* .content {
  padding-right: 90px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .blogs-wrapper>* .content {
    padding-right: 70px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .blogs-wrapper>* .content {
    padding-right: 0;
  }
}

.blog-area-3 .blog {
  position: relative;
}

.blog-area-3 .blog:hover .thumb img {
  transform: scale(1.1);
}

.blog-area-3 .blog:hover .title .arrow {
  background-color: var(--primary);
}

.blog-area-3 .blog:hover .title .arrow svg {
  transform: rotate(60deg);
}

.blog-area-3 .blog:hover .title .arrow svg * {
  fill: var(--white);
}

.dark .blog-area-3 .blog:hover .title .arrow svg * {
  fill: var(--black);
}

.blog-area-3 .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-3 .blog:before {
    left: -20px;
  }
}

.blog-area-3 .blog .thumb {
  overflow: hidden;
}

.blog-area-3 .blog .thumb img {
  width: 100%;
  transition: all 0.5s;
}

.blog-area-3 .blog .content {
  margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .blog .content {
    margin-top: 14px;
  }
}

.blog-area-3 .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-3 .blog .title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-3 .blog .title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .blog .title {
    font-size: 20px;
  }
}

.blog-area-3 .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-3 .blog .title .arrow {
    width: 20px;
    height: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-3 .blog .title .arrow {
    width: 17px;
    height: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .blog .title .arrow {
    width: 15px;
    height: 15px;
    border-width: 1px;
  }
}

.blog-area-3 .blog .title .arrow svg {
  transition: all 0.3s;
  width: 13px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-3 .blog .title .arrow svg {
    width: 10px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-3 .blog .title .arrow svg {
    width: 7px;
  }
}

.blog-area-3 .blog .title .arrow svg * {
  fill: var(--primary);
}

.blog-area-3 .blog .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 14px;
}

@media only screen and (max-width: 1199px) {
  .blog-area-3 .blog .meta {
    margin-top: 9px;
  }
}

.blog-area-3 .blog .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--secondary);
}

.blog-area-3 .blog .meta span.has-left-line {
  padding-inline-start: 15px;
}

.blog-area-3 .blog .meta span.has-left-line:before {
  width: 10px;
}

.blog-area-3 .blog .meta .name span {
  font-weight: 500;
  color: var(--primary);
}

/* blog page css */
.blog-area-2 .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .blog-area-2 .section-header {
    padding-top: 7px;
  }
}

.blog-area-2 .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-2 .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.blog-area-2 .subtitle-wrapper {
  margin-top: 8px;
}

.blog-area-2 .section-title {
  max-width: 800px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .section-title {
    max-width: 700px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-2 .section-title {
    max-width: 640px;
  }
}

.blog-area-2 .blogs-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .blogs-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-2 .blogs-wrapper-box {
    margin-top: 44px;
  }
}

.blog-area-2 .blogs-wrapper {
  display: grid;
  gap: 76px 60px;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .blogs-wrapper {
    gap: 46px 40px;
  }
}

@media only screen and (max-width: 991px) {
  .blog-area-2 .blogs-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .blog-area-2 .blogs-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.blog-area-2 .blogs-wrapper>* {
  grid-column: span 2;
}

@media only screen and (max-width: 991px) {
  .blog-area-2 .blogs-wrapper>* {
    grid-column: auto;
  }
}

.blog-area-2 .blogs-wrapper>*:nth-child(4),
.blog-area-2 .blogs-wrapper>*:nth-child(5) {
  grid-column: span 3;
}

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

  .blog-area-2 .blogs-wrapper>*:nth-child(4),
  .blog-area-2 .blogs-wrapper>*:nth-child(5) {
    grid-column: auto;
  }
}

.blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
.blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
  padding-right: 130px;
}

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

  .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 100px;
  }
}

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

  .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 80px;
  }
}

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

  .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
  .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 0;
  }
}

.blog-area-2 .blogs-wrapper>* .content {
  padding-right: 90px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .blogs-wrapper>* .content {
    padding-right: 70px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .blogs-wrapper>* .content {
    padding-right: 0;
  }
}

.blog-area-2 .blog {
  position: relative;
}

.blog-area-2 .blog:hover .thumb img {
  transform: scale(1.1);
}

.blog-area-2 .blog:hover .title .arrow {
  background-color: var(--primary);
}

.blog-area-2 .blog:hover .title .arrow svg {
  transform: rotate(60deg);
}

.blog-area-2 .blog:hover .title .arrow svg * {
  fill: var(--white);
}

.dark .blog-area-2 .blog:hover .title .arrow svg * {
  fill: var(--black);
}

.blog-area-2 .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-2 .blog:before {
    left: -20px;
  }
}

.blog-area-2 .blog .thumb {
  overflow: hidden;
}

.blog-area-2 .blog .thumb img {
  width: 100%;
  transition: all 0.5s;
}

.blog-area-2 .blog .content {
  margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .blog .content {
    margin-top: 14px;
  }
}

.blog-area-2 .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-2 .blog .title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-2 .blog .title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .blog .title {
    font-size: 20px;
  }
}

.blog-area-2 .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-2 .blog .title .arrow {
    width: 20px;
    height: 20px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-2 .blog .title .arrow {
    width: 17px;
    height: 17px;
  }
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .blog .title .arrow {
    width: 15px;
    height: 15px;
    border-width: 1px;
  }
}

.blog-area-2 .blog .title .arrow svg {
  transition: all 0.3s;
  width: 13px;
}

@media only screen and (max-width: 1919px) {
  .blog-area-2 .blog .title .arrow svg {
    width: 10px;
  }
}

@media only screen and (max-width: 1399px) {
  .blog-area-2 .blog .title .arrow svg {
    width: 7px;
  }
}

.blog-area-2 .blog .title .arrow svg * {
  fill: var(--primary);
}

.blog-area-2 .blog .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 14px;
}

@media only screen and (max-width: 1199px) {
  .blog-area-2 .blog .meta {
    margin-top: 9px;
  }
}

.blog-area-2 .blog .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--secondary);
}

.blog-area-2 .blog .meta span.has-left-line {
  padding-inline-start: 15px;
}

.blog-area-2 .blog .meta span.has-left-line:before {
  width: 10px;
}

.blog-area-2 .blog .meta .name span {
  font-weight: 500;
  color: var(--primary);
}

/* contact page css */
/* Loading effect */
.loading-form {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 99;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font-size: 20px;
  text-align: center;
  padding-top: 20%;
}

.success-message {
  color: green;
  margin-top: 10px;
}

.error-message {
  color: red;
  margin-top: 10px;
}

#response-message {
  margin-top: 10px;
}

.contact-area-contact-page .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .contact-area-contact-page .section-header {
    padding-top: 7px;
  }
}

.contact-area-contact-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .contact-area-contact-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .contact-area-contact-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-area-contact-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-area-contact-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.contact-area-contact-page .subtitle-wrapper {
  margin-top: 8px;
}

.contact-area-contact-page .section-title {
  max-width: 875px;
}

@media only screen and (max-width: 1919px) {
  .contact-area-contact-page .section-title {
    max-width: 675px;
  }
}

@media only screen and (max-width: 1399px) {
  .contact-area-contact-page .section-title {
    max-width: 495px;
  }
}

.contact-area-contact-page .section-content-wrapper {
  margin-top: 90px;
  margin-bottom: 4px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 1030px;
  align-items: flex-start;
}

@media only screen and (max-width: 1919px) {
  .contact-area-contact-page .section-content-wrapper {
    margin-top: 60px;
    grid-template-columns: 1fr 730px;
  }
}

@media only screen and (max-width: 1399px) {
  .contact-area-contact-page .section-content-wrapper {
    grid-template-columns: 1fr 680px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-area-contact-page .section-content-wrapper {
    grid-template-columns: 1fr 550px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-area-contact-page .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.contact-area-contact-page .contact-mail .title {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--primary);
}

.contact-area-contact-page .contact-mail .text {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  max-width: 410px;
  margin-top: 24px;
}

@media only screen and (max-width: 1919px) {
  .contact-area-contact-page .contact-mail .text {
    font-size: 24px;
    max-width: 330px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-area-contact-page .contact-mail .text {
    font-size: 20px;
    max-width: 280px;
  }
}

.contact-area-contact-page .contact-mail .text a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-area-contact-page .contact-mail .text a:hover {
  color: var(--secondary);
}

.contact-area-contact-page .contact-social {
  margin-top: 51px;
}

.contact-area-contact-page .contact-social .title {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: var(--primary);
}

.contact-area-contact-page .contact-social .social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 24px;
}

.contact-area-contact-page .contact-social .social-links a {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  display: inline-block;
  transition: all 0.5s;
}

@media only screen and (max-width: 1919px) {
  .contact-area-contact-page .contact-social .social-links a {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-area-contact-page .contact-social .social-links a {
    font-size: 20px;
  }
}

.contact-area-contact-page .contact-social .social-links a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-area-contact-page .contact-formwrap {
  display: grid;
  gap: 60px 60px;
  grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 1399px) {
  .contact-area-contact-page .contact-formwrap {
    gap: 40px 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .contact-area-contact-page .contact-formwrap {
    gap: 30px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .contact-area-contact-page .contact-formwrap {
    grid-template-columns: repeat(1, 1fr);
  }
}

.contact-area-contact-page .contact-formwrap .message {
  grid-column: span 2;
  margin-top: 30px;
}

@media only screen and (max-width: 767px) {
  .contact-area-contact-page .contact-formwrap .message {
    grid-column: auto;
  }
}

.contact-area-contact-page .contact-formfield input {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid var(--primary);
  outline: none;
  background-color: transparent;
  transition: all 0.5s;
  color: var(--primary);
}

.contact-area-contact-page .contact-formfield input:focus {
  border-color: var(--primary);
}

.contact-area-contact-page .contact-formfield input::placeholder {
  color: var(--primary);
}

.contact-area-contact-page .contact-formfield input:-webkit-autofill,
.contact-area-contact-page .contact-formfield input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

.contact-area-contact-page .contact-formfield select {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid var(--primary);
  outline: none;
  background-color: transparent;
  transition: all 0.5s;
  color: var(--primary);
}

.contact-area-contact-page .contact-formfield select:focus {
  border-color: var(--primary);
}

.contact-area-contact-page .contact-formfield select option {
  width: 100%;
  max-width: 100%;
}

.dark .contact-area-contact-page .contact-formfield select option {
  background-color: var(--black);
}

.contact-area-contact-page .contact-formfield select option[disabled] {
  background-color: var(--black) !important;
}

.contact-area-contact-page .submit-btn {
  margin-top: 50px;
}

@media only screen and (max-width: 1399px) {
  .contact-area-contact-page .submit-btn {
    margin-top: 40px;
  }
}

/* faq page css */
.faq-area-faq-page .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .faq-area-faq-page .section-header {
    padding-top: 7px;
  }
}

.faq-area-faq-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .faq-area-faq-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area-faq-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .faq-area-faq-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .faq-area-faq-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.faq-area-faq-page .subtitle-wrapper {
  margin-top: 8px;
}

.faq-area-faq-page .section-title {
  max-width: 1005px;
}

@media only screen and (max-width: 1919px) {
  .faq-area-faq-page .section-title {
    max-width: 805px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area-faq-page .section-title {
    max-width: 605px;
  }
}

.faq-area-faq-page .accordion-wrapper {
  max-width: 1235px;
  margin-left: auto;
  margin-top: 93px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1919px) {
  .faq-area-faq-page .accordion-wrapper {
    margin-top: 63px;
    max-width: 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area-faq-page .accordion-wrapper {
    margin-top: 43px;
    max-width: 900px;
  }
}

@media only screen and (max-width: 1199px) {
  .faq-area-faq-page .accordion-wrapper {
    max-width: 750px;
  }
}

.faq-area-faq-page .accordion {
  border-top: 1px solid var(--border);
  counter-reset: accordion;
}

.faq-area-faq-page .accordion-button {
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  padding: 30px 0 33px;
  border-radius: 0 !important;
  background-color: transparent;
  outline: 0;
  box-shadow: none;
}

@media only screen and (max-width: 1919px) {
  .faq-area-faq-page .accordion-button {
    padding: 20px 0 23px;
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area-faq-page .accordion-button {
    font-size: 20px;
  }
}

.faq-area-faq-page .accordion-button::after {
  content: "+";
  font-family: var(--font_awesome);
  background-image: none;
  width: auto;
  height: auto;
}

.faq-area-faq-page .accordion-button:not(.collapsed) {
  pointer-events: none;
}

.faq-area-faq-page .accordion-button:not(.collapsed)::after {
  content: "-";
}

.faq-area-faq-page .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 130px;
  transition: all 0.5s;
}

@media only screen and (max-width: 991px) {
  .faq-area-faq-page .accordion-item {
    padding-left: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area-faq-page .accordion-item {
    padding-left: 50px;
  }
}

.faq-area-faq-page .accordion-item:before {
  counter-increment: accordion;
  content: counter(accordion, decimal-leading-zero);
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  position: absolute;
  top: 30px;
  left: 0;
  transition: all 0.5s;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .faq-area-faq-page .accordion-item:before {
    top: 20px;
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area-faq-page .accordion-item:before {
    font-size: 20px;
  }
}

.faq-area-faq-page .accordion-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--secondary);
  padding: 4px 0 43px;
  border: none;
}

/* service details page css */
.hero-area-service-details .service-meta {
  display: grid;
  gap: 10px 60px;
  grid-template-columns: 1fr 1045px;
  position: relative;
  margin-top: 27px;
}

@media only screen and (max-width: 1919px) {
  .hero-area-service-details .service-meta {
    grid-template-columns: 1fr 845px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-area-service-details .service-meta {
    grid-template-columns: 1fr 645px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-service-details .service-meta {
    grid-template-columns: 1fr 585px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-area-service-details .service-meta {
    grid-template-columns: 1fr;
  }
}

.hero-area-service-details .service-meta .serial {
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;
}

.hero-area-service-details .service-meta .tag {
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;
}

.hero-area-service-details .service-meta .next-item {
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

.hero-area-service-details .section-header {
  margin-top: 84px;
  display: grid;
  grid-template-columns: 1045px;
  justify-content: flex-end;
}

@media only screen and (max-width: 1919px) {
  .hero-area-service-details .section-header {
    grid-template-columns: 845px;
    margin-top: 64px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-area-service-details .section-header {
    grid-template-columns: 645px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-service-details .section-header {
    grid-template-columns: 585px;
    margin-top: 44px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-area-service-details .section-header {
    grid-template-columns: 1fr;
  }
}

.hero-area-service-details .section-content-wrapper {
  margin-top: 94px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 1045px;
}

@media only screen and (max-width: 1919px) {
  .hero-area-service-details .section-content-wrapper {
    grid-template-columns: 1fr 845px;
    margin-top: 64px;
  }
}

@media only screen and (max-width: 1399px) {
  .hero-area-service-details .section-content-wrapper {
    grid-template-columns: 1fr 645px;
  }
}

@media only screen and (max-width: 1199px) {
  .hero-area-service-details .section-content-wrapper {
    grid-template-columns: 1fr 585px;
    margin-top: 44px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-area-service-details .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.hero-area-service-details .section-content .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  max-width: 420px;
}

.hero-area-service-details .section-thumb img {
  width: 100%;
}

.hero-area-service-details .feature-list {
  margin-top: 26px;
}

.hero-area-service-details .feature-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
  display: flex;
  align-items: center;
}

.hero-area-service-details .feature-list li:before {
  content: "+";
  margin-right: 5px;
}

/* approach area service details style  */
.approach-area-service-details-page .section-header {
  margin-top: 32px;
}

.approach-area-service-details-page .section-title-wrapper {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 1125px;
  align-items: flex-end;
}

@media only screen and (max-width: 1919px) {
  .approach-area-service-details-page .section-title-wrapper {
    grid-template-columns: 1fr 905px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-service-details-page .section-title-wrapper {
    grid-template-columns: 1fr 675px;
  }
}

@media only screen and (max-width: 1199px) {
  .approach-area-service-details-page .section-title-wrapper {
    grid-template-columns: 1fr 575px;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-service-details-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.approach-area-service-details-page .section-subtitle {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  text-transform: unset;
}

@media only screen and (max-width: 1919px) {
  .approach-area-service-details-page .section-subtitle {
    font-size: 24px;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-service-details-page .section-subtitle {
    font-size: 18px;
  }

  .approach-area-service-details-page .section-subtitle br {
    display: none;
  }
}

.approach-area-service-details-page .section-title {
  max-width: 875px;
}

@media (min-width: 1200px) {
  .approach-area-service-details-page .section-title {
    font-size: 50px;
    line-height: 1;
  }
}

.approach-area-service-details-page .approach-wrapper-box {
  margin-top: 94px;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 1125px;
  align-items: flex-start;
  margin-bottom: 50px;
}

@media only screen and (max-width: 1919px) {
  .approach-area-service-details-page .approach-wrapper-box {
    grid-template-columns: 1fr 905px;
    margin-top: 64px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-service-details-page .approach-wrapper-box {
    grid-template-columns: 1fr 675px;
  }
}

@media only screen and (max-width: 1199px) {
  .approach-area-service-details-page .approach-wrapper-box {
    grid-template-columns: 1fr 575px;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-service-details-page .approach-wrapper-box {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
}

.approach-area-service-details-page .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-service-details-page .approach-wrapper-box .steps {
    font-size: 205px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-service-details-page .approach-wrapper-box .steps {
    font-size: 165px;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-service-details-page .approach-wrapper-box .steps {
    display: none;
  }
}

.approach-area-service-details-page .approach-wrapper {
  border-top: 1px dashed #878482;
}

.approach-area-service-details-page .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;
}

@media only screen and (max-width: 1919px) {
  .approach-area-service-details-page .approach-box {
    grid-template-columns: 60px 1fr 395px;
  }
}

@media only screen and (max-width: 1399px) {
  .approach-area-service-details-page .approach-box {
    grid-template-columns: 60px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .approach-area-service-details-page .approach-box {
    gap: 10px 30px;
  }
}

@media (max-width: 575px) {
  .approach-area-service-details-page .approach-box {
    grid-template-columns: 30px 1fr;
  }
}

.approach-area-service-details-page .approach-box .number {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary);
}

@media only screen and (max-width: 1399px) {
  .approach-area-service-details-page .approach-box .number {
    grid-row: span 2;
  }
}

.approach-area-service-details-page .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-service-details-page .approach-box .title {
    font-size: 24px;
  }
}

.approach-area-service-details-page .approach-box .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.feature-area .features-wrapper-box {
  margin-top: 44px;
}

.feature-area .features-wrapper {
  display: grid;
  gap: 60px 60px;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

@media only screen and (max-width: 1919px) {
  .feature-area .features-wrapper {
    gap: 60px 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .feature-area .features-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .feature-area .features-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.feature-area .features-wrapper>*:nth-child(2n) .thumb {
  order: 2;
}

@media only screen and (max-width: 1199px) {
  .feature-area .features-wrapper>*:nth-child(2n) .thumb {
    order: unset;
  }
}

.feature-area .feature-box {
  position: relative;
  display: grid;
  gap: 175px;
}

@media only screen and (max-width: 1919px) {
  .feature-area .feature-box {
    gap: 95px;
  }
}

@media only screen and (max-width: 1399px) {
  .feature-area .feature-box {
    gap: 75px;
  }
}

@media only screen and (max-width: 1199px) {
  .feature-area .feature-box {
    gap: 45px;
  }
}

.feature-area .feature-box:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  top: 0;
  left: -30px;
}

@media only screen and (max-width: 1919px) {
  .feature-area .feature-box:before {
    left: -20px;
  }
}

.feature-area .feature-box .thumb img {
  height: 80px;
}

@media only screen and (max-width: 1919px) {
  .feature-area .feature-box .thumb img {
    height: 60px;
  }
}

.feature-area .feature-box .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--white);
}

@media only screen and (max-width: 1919px) {
  .feature-area .feature-box .title {
    font-size: 24px;
  }
}

.feature-area .feature-box .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white-2);
  margin-top: 30px;
}

@media only screen and (max-width: 1919px) {
  .feature-area .feature-box .text {
    font-size: 18px;
    margin-top: 20px;
  }
}

/* value area style  */
.value-area {
  background-color: var(--bg);
}

.value-area .section-content-wrapper {
  margin-top: 32px;
  margin-bottom: 45px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 605px 905px;
  justify-content: space-between;
  align-items: flex-start;
}

@media only screen and (max-width: 1919px) {
  .value-area .section-content-wrapper {
    grid-template-columns: 1fr 770px;
  }
}

@media only screen and (max-width: 1199px) {
  .value-area .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.value-area .section-thumb {
  margin-top: 11px;
  max-width: 660px;
}

.value-area .section-thumb img {
  width: 100%;
}

.value-area .section-title {
  letter-spacing: -0.07em;
  color: var(--white);
  max-width: 660px;
}

@media (min-width: 1200px) {
  .value-area .section-title {
    font-size: 50px;
    font-weight: 315;
    line-height: 55px;
  }
}

.value-area .values-wrapper {
  margin-top: 56px;
}

@media only screen and (max-width: 991px) {
  .value-area .values-wrapper {
    margin-top: 36px;
  }
}

.value-area .value-box {
  display: grid;
  gap: 20px 80px;
  grid-template-columns: 330px 1fr;
}

@media only screen and (max-width: 1919px) {
  .value-area .value-box {
    grid-template-columns: 230px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .value-area .value-box {
    grid-template-columns: 130px 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .value-area .value-box {
    grid-template-columns: 1fr;
  }
}

.value-area .value-box:not(:first-child) {
  margin-top: 68px;
}

@media only screen and (max-width: 991px) {
  .value-area .value-box:not(:first-child) {
    margin-top: 38px;
  }
}

.value-area .value-box .number {
  font-size: 100px;
  font-weight: 310;
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: var(--white);
  padding-top: 17px;
  border-top: 1px solid rgba(252, 247, 243, 0.2);
  margin-top: 6px;
}

@media only screen and (max-width: 1919px) {
  .value-area .value-box .number {
    font-size: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .value-area .value-box .number {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1199px) {
  .value-area .value-box .number {
    font-size: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .value-area .value-box .number {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .value-area .value-box .number {
    font-size: 35px;
  }
}

.value-area .value-box .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--white-2);
}

@media only screen and (max-width: 1919px) {
  .value-area .value-box .text {
    font-size: 18px;
  }
}

/* faq area style  */
.faq-area .section-header {
  margin-top: 50px;
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .faq-area .section-header {
    margin-top: 10px;
    padding-top: 7px;
  }
}

.faq-area .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .faq-area .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .faq-area .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .faq-area .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.faq-area .subtitle-wrapper {
  margin-top: 8px;
}

.faq-area .section-title {
  max-width: 1005px;
}

@media only screen and (max-width: 1919px) {
  .faq-area .section-title {
    max-width: 905px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area .section-title {
    max-width: 705px;
  }
}

.faq-area .accordion-wrapper {
  max-width: 1235px;
  margin-left: auto;
  margin-top: 93px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1919px) {
  .faq-area .accordion-wrapper {
    margin-top: 63px;
    max-width: 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .faq-area .accordion-wrapper {
    margin-top: 43px;
    max-width: 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .faq-area .accordion-wrapper {
    max-width: 750px;
  }
}

.faq-area .accordion {
  border-top: 1px solid var(--border);
  counter-reset: accordion;
}

.faq-area .accordion-button {
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  padding: 30px 0 33px;
  border-radius: 0 !important;
  background-color: transparent;
  outline: 0;
  box-shadow: none;
}

@media only screen and (max-width: 1919px) {
  .faq-area .accordion-button {
    padding: 20px 0 23px;
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area .accordion-button {
    font-size: 20px;
  }
}

.faq-area .accordion-button::after {
  content: "+";
  font-family: var(--font_awesome);
  background-image: none;
  width: auto;
  height: auto;
}

.faq-area .accordion-button:not(.collapsed) {
  pointer-events: none;
}

.faq-area .accordion-button:not(.collapsed)::after {
  content: "-";
}

.faq-area .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 130px;
  transition: all 0.5s;
}

@media only screen and (max-width: 991px) {
  .faq-area .accordion-item {
    padding-left: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area .accordion-item {
    padding-left: 50px;
  }
}

.faq-area .accordion-item:before {
  counter-increment: accordion;
  content: counter(accordion, decimal-leading-zero);
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 1.16;
  letter-spacing: -0.07em;
  color: var(--primary);
  position: absolute;
  top: 30px;
  left: 0;
  transition: all 0.5s;
}

@media only screen and (max-width: 1919px) {
  .faq-area .accordion-item:before {
    top: 20px;
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area .accordion-item:before {
    font-size: 20px;
  }
}

.faq-area .accordion-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--secondary);
  padding: 4px 0 43px;
  border: none;
}

/* sercices page css */
.service-area-service-page .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .service-area-service-page .section-header {
    padding-top: 7px;
  }
}

.service-area-service-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .service-area-service-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-area-service-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-area-service-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .service-area-service-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.service-area-service-page .subtitle-wrapper {
  margin-top: 8px;
}

.service-area-service-page .section-title {
  max-width: 800px;
}

@media only screen and (max-width: 1919px) {
  .service-area-service-page .section-title {
    max-width: 700px;
  }
}

@media only screen and (max-width: 1399px) {
  .service-area-service-page .section-title {
    max-width: 500px;
  }
}

.service-area-service-page .services-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .service-area-service-page .services-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .service-area-service-page .services-wrapper-box {
    margin-top: 44px;
  }
}

.service-area-service-page .service-content-wrapper {
  background-color: transparent;
}

.service-area-service-page .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%);
}

.dark .service-area-service-page .service-content-wrapper .service-content .text.text-invert>div {
  background-image: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.3) 51%);
}

.service-area-service-page .services-wrapper-2 .service-box {
  background-color: var(--white);
  border-color: var(--border);
}

.dark .service-area-service-page .services-wrapper-2 .service-box {
  background-color: var(--black);
}

.service-area-service-page .services-wrapper-2 .service-box:last-child {
  border-color: var(--border);
}

.service-area-service-page .services-wrapper-2 .service-box-wrapper {
  background-color: var(--border);
}

.service-area-service-page .services-wrapper-2 .service-box .number {
  color: var(--primary);
}

.service-area-service-page .services-wrapper-2 .service-box .title {
  color: var(--primary);
}

.service-area-service-page .services-wrapper-2 .service-box .text {
  color: var(--primary);
}

.service-area-service-page .capabilities-area-2 .capability-box .title {
  font-family: var(--font_thunder);
  font-size: 100px;
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
}

/* client area service-page style  */
.client-area-service-page .section-title {
  max-width: 1430px;
}

@media only screen and (max-width: 1919px) {
  .client-area-service-page .section-title {
    max-width: 1130px;
  }
}

.client-area-service-page .section-title span {
  color: var(--primary);
}

.client-area-service-page .section-content {
  margin-top: 20px;
}

.client-area-service-page .section-content .text-wrapper {
  max-width: 505px;
  margin-top: 133px;
  margin-left: 545px;
}

@media only screen and (max-width: 1919px) {
  .client-area-service-page .section-content .text-wrapper {
    margin-top: 83px;
  }
}

@media only screen and (max-width: 1399px) {
  .client-area-service-page .section-content .text-wrapper {
    margin-top: 63px;
    margin-left: 345px;
  }
}

@media only screen and (max-width: 991px) {
  .client-area-service-page .section-content .text-wrapper {
    margin-top: 43px;
    margin-left: auto;
  }
}

@media only screen and (max-width: 767px) {
  .client-area-service-page .section-content .text-wrapper {
    max-width: 100%;
    margin-top: 23px;
  }
}

.client-area-service-page .client-capsule-wrapper {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  margin-top: -200px;
  height: 633px;
}

@media only screen and (max-width: 1919px) {
  .client-area-service-page .client-capsule-wrapper {
    height: 533px;
  }
}

@media only screen and (max-width: 1399px) {
  .client-area-service-page .client-capsule-wrapper {
    height: 483px;
  }
}

@media only screen and (max-width: 991px) {
  .client-area-service-page .client-capsule-wrapper {
    height: 433px;
  }
}

.client-area-service-page .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-service-page .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-service-page .client-box {
    width: 165px;
    height: 70px;
  }
}

@media only screen and (max-width: 1399px) {
  .client-area-service-page .client-box {
    width: 135px;
    height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .client-area-service-page .client-box {
    width: 105px;
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .client-area-service-page .client-box {
    width: 85px;
    height: 30px;
  }
}

.client-area-service-page .client-box img {
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
}

.client-area-service-page .line {
  border-bottom: 1px solid var(--primary);
}

.client-area-service-page .lines-wrapper {
  display: grid;
  gap: 5px 0;
}

@media only screen and (max-width: 1399px) {
  .client-area-service-page .lines-wrapper {
    gap: 3px 0;
  }
}

@media only screen and (max-width: 767px) {
  .client-area-service-page .lines-wrapper {
    gap: 1px 0;
  }
}

/* team details page css */
.team-details-area .section-content-wrapper {
  margin-top: 17px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 590px 600px;
  justify-content: space-between;
}

@media only screen and (max-width: 1399px) {
  .team-details-area .section-content-wrapper {
    grid-template-columns: 1fr 500px;
  }
}

@media only screen and (max-width: 1199px) {
  .team-details-area .section-content-wrapper {
    grid-template-columns: 1fr 430px;
  }
}

@media only screen and (max-width: 991px) {
  .team-details-area .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.team-details-area .team-thumb {
  margin-top: 13px;
  order: 2;
}

@media only screen and (max-width: 991px) {
  .team-details-area .team-thumb {
    order: unset;
    max-width: 500px;
  }
}

.team-details-area .team-thumb img {
  width: 100%;
}

.team-details-area .section-subtitle {
  font-family: var(--font_sequelsansromanbody);
  font-size: 30px;
  font-weight: 310;
  line-height: 0.93;
  letter-spacing: -0.07em;
  color: var(--primary);
  text-transform: unset;
}

@media only screen and (max-width: 1399px) {
  .team-details-area .section-subtitle {
    font-size: 24px;
  }
}

@media only screen and (max-width: 991px) {
  .team-details-area .section-subtitle {
    font-size: 22px;
  }
}

.team-details-area .subtitle-wrapper {
  margin-top: 29px;
}

@media only screen and (max-width: 1399px) {
  .team-details-area .subtitle-wrapper {
    margin-top: 19px;
  }
}

.team-details-area .section-content .text-wrapper {
  margin-top: 51px;
}

@media only screen and (max-width: 1399px) {
  .team-details-area .section-content .text-wrapper {
    margin-top: 41px;
  }
}

@media only screen and (max-width: 991px) {
  .team-details-area .section-content .text-wrapper {
    margin-top: 31px;
  }
}

.team-details-area .section-content .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.team-details-area .section-content .text:not(:first-child) {
  margin-top: 28px;
}

.team-details-area .social-links {
  margin-top: 53px;
  border-top: 1px dashed #878482;
  display: grid;
}

.dark .team-details-area .social-links {
  border-color: #6F6D6C;
}

@media only screen and (max-width: 1399px) {
  .team-details-area .social-links {
    margin-top: 43px;
  }
}

@media only screen and (max-width: 991px) {
  .team-details-area .social-links {
    margin-top: 33px;
  }
}

.team-details-area .social-links a {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #878482;
  padding: 11px 0;
  transition: all 0.5s;
}

.dark .team-details-area .social-links a {
  border-color: #6F6D6C;
}

.team-details-area .social-links a:hover {
  background-color: #F7F7FA;
  padding-left: 20px;
}

.dark .team-details-area .social-links a:hover {
  background-color: #171717;
}

.team-details-area .social-links a:before {
  content: "+";
  margin-right: 6px;
}

/* team area team page style  */
.team-area-team-page .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .team-area-team-page .section-header {
    padding-top: 7px;
  }
}

.team-area-team-page .section-title-wrapper {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 325px 1fr;
}

@media only screen and (max-width: 1919px) {
  .team-area-team-page .section-title-wrapper {
    grid-template-columns: 275px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .team-area-team-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.team-area-team-page .subtitle-wrapper {
  margin-top: 8px;
}

.team-area-team-page .section-title {
  max-width: 530px;
}

@media only screen and (max-width: 1919px) {
  .team-area-team-page .section-title {
    max-width: 430px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-area-team-page .section-title {
    max-width: 350px;
  }
}

.team-area-team-page .team-info {
  margin-top: 13px;
}

.team-area-team-page .team-info .team-group {
  display: inline-flex;
  align-items: center;
}

.team-area-team-page .team-info .team-group img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  outline: 3px solid var(--white);
}

.dark .team-area-team-page .team-info .team-group img {
  outline-color: var(--black);
}

@media only screen and (max-width: 1919px) {
  .team-area-team-page .team-info .team-group img {
    width: 50px;
    height: 50px;
  }
}

.team-area-team-page .team-info .team-group img:not(:first-child) {
  margin-left: -10px;
}

.team-area-team-page .team-info .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  max-width: 275px;
}

.team-area-team-page .team-info .text span {
  font-weight: 500;
  color: var(--primary);
}

.team-area-team-page .team-info .text-wrapper {
  margin-top: 16px;
}

.team-area-team-page .title-wrapper .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  max-width: 580px;
  margin-top: 54px;
}

@media only screen and (max-width: 1919px) {
  .team-area-team-page .title-wrapper .text {
    margin-top: 44px;
  }
}

@media only screen and (max-width: 1399px) {
  .team-area-team-page .title-wrapper .text {
    margin-top: 24px;
  }
}

/* cta area team page style  */
.cta-area-team-page .section-content {
  margin-top: 32px;
  text-align: center;
}

.cta-area-team-page .section-content .btn-wrapper {
  margin-top: 45px;
  margin-bottom: 1px;
}

@media only screen and (max-width: 1199px) {
  .cta-area-team-page .section-content .btn-wrapper {
    margin-top: 35px;
  }
}

.cta-area-team-page .section-title {
  max-width: 920px;
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .cta-area-team-page .section-title {
    font-size: 50px;
    line-height: 50px;
  }
}

/* team list area style  */
.team-list-area .team-box {
  border-bottom: 1px solid #E1E1E1;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  gap: 15px 25px;
  grid-template-columns: 100px 1fr 960px auto;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
}

.dark .team-list-area .team-box {
  border-color: #292929;
}

@media only screen and (max-width: 1919px) {
  .team-list-area .team-box {
    grid-template-columns: 100px 1fr 560px auto;
  }
}

@media only screen and (max-width: 1199px) {
  .team-list-area .team-box {
    grid-template-columns: 100px 1fr 310px auto;
  }
}

@media only screen and (max-width: 991px) {
  .team-list-area .team-box {
    grid-template-columns: 80px 1fr 210px auto;
  }
}

@media only screen and (max-width: 767px) {
  .team-list-area .team-box {
    grid-template-columns: 1fr 1fr auto;
  }
}

.team-list-area .team-box:hover {
  background-color: #FAFAFA;
}

.dark .team-list-area .team-box:hover {
  background-color: #1D1C1C;
}

.team-list-area .team-box:hover .thumb {
  transform: translateX(20px);
}

.team-list-area .team-box:hover .name {
  transform: translateX(20px);
}

.team-list-area .team-box:hover .t-btn-normal {
  transform: translateX(-20px);
}

.team-list-area .team-box .thumb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.5s;
}

@media only screen and (max-width: 991px) {
  .team-list-area .team-box .thumb {
    width: 80px;
    height: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .team-list-area .team-box .thumb {
    grid-column: span 3;
  }
}

.team-list-area .team-box .thumb img {
  width: 100%;
}

.team-list-area .team-box .name {
  font-size: 30px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
  transition: all 0.5s;
}

@media only screen and (max-width: 1399px) {
  .team-list-area .team-box .name {
    font-size: 24px;
  }
}

.team-list-area .team-box .post {
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  display: inline-block;
}

.team-list-area .team-wrapper-box {
  margin-top: 90px;
}

@media only screen and (max-width: 1399px) {
  .team-list-area .team-wrapper-box {
    margin-top: 70px;
  }
}

.team-list-area .team-wrapper {
  border-top: 1px solid #E1E1E1;
}

.dark .team-list-area .team-wrapper {
  border-color: #292929;
}

/* team area style  */
.team-area .section-header {
  margin-top: 59px;
  display: grid;
  gap: 20px 20px;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
}

@media only screen and (max-width: 991px) {
  .team-area .section-header {
    grid-template-columns: 1fr;
  }
}

.team-area .section-header .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  max-width: 375px;
}

.team-area .section-header .section-title-wrapper {
  order: 2;
}

@media only screen and (max-width: 991px) {
  .team-area .section-header .section-title-wrapper {
    order: unset;
  }
}

.team-area .team-wrapper-box {
  margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
  .team-area .team-wrapper-box {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .team-area .team-wrapper-box {
    margin-top: 44px;
  }
}

.team-area .team-wrapper {
  display: grid;
  gap: 40px 20px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px) {
  .team-area .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.team-area .team-box:hover .thumb img {
  transform: scale(1.1);
}

.team-area .team-box .thumb {
  overflow: hidden;
}

.team-area .team-box .thumb img {
  width: 100%;
  transition: all 0.5s;
}

.team-area .team-box .name {
  font-size: 30px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
}

@media only screen and (max-width: 1919px) {
  .team-area .team-box .name {
    font-size: 24px;
  }
}

.team-area .team-box .post {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  display: inline-block;
  margin-top: 3px;
}

.team-area .team-box .content {
  margin-top: 19px;
}

/* work details page css */
.work-details-area .section-header {
  margin-top: 17px;
}

.work-details-area .section-title-wrapper {
  display: grid;
  gap: 20px 29px;
  grid-template-columns: 315px 1fr;
}

@media only screen and (max-width: 1919px) {
  .work-details-area .section-title-wrapper {
    grid-template-columns: 245px 1fr;
  }
}

@media only screen and (max-width: 1399px) {
  .work-details-area .section-title-wrapper {
    grid-template-columns: 195px 1fr;
  }
}

@media only screen and (max-width: 1199px) {
  .work-details-area .section-title-wrapper {
    align-items: center;
  }
}

@media only screen and (max-width: 767px) {
  .work-details-area .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.work-details-area .section-title-wrapper .title-thumb {
  border-radius: 20px;
  overflow: hidden;
  display: inline-block;
  margin-top: 13px;
  max-width: 315px;
}

@media only screen and (max-width: 1399px) {
  .work-details-area .section-title-wrapper .title-thumb {
    margin-top: 5px;
  }
}

.work-details-area .meta-wrapper {
  margin-top: 51px;
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-bottom: 95px;
}

@media only screen and (max-width: 1919px) {
  .work-details-area .meta-wrapper {
    margin-top: 41px;
    margin-bottom: 65px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-details-area .meta-wrapper {
    gap: 30px 40px;
    margin-top: 31px;
    margin-bottom: 45px;
  }
}

@media only screen and (max-width: 991px) {
  .work-details-area .meta-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.work-details-area .meta-item {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.work-details-area .meta-item .title {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}

.work-details-area .meta-item .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: var(--primary);
  margin-top: 4px;
}

.work-details-area .section-info {
  margin-top: 59px;
  margin-bottom: 93px;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr 825px;
}

@media only screen and (max-width: 1919px) {
  .work-details-area .section-info {
    margin-top: 49px;
    margin-bottom: 63px;
  }
}

@media only screen and (max-width: 1399px) {
  .work-details-area .section-info {
    grid-template-columns: 1fr 650px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-details-area .section-info {
    grid-template-columns: 1fr 550px;
    margin-top: 29px;
    margin-bottom: 43px;
  }
}

@media only screen and (max-width: 991px) {
  .work-details-area .section-info {
    grid-template-columns: 1fr;
  }
}

.work-details-area .section-info .title {
  font-size: 50px;
  font-weight: 310;
  line-height: 1;
  letter-spacing: -0.07em;
  max-width: 440px;
}

@media only screen and (max-width: 1919px) {
  .work-details-area .section-info .title {
    font-size: 38px;
    max-width: 340px;
  }
}

@media (max-width: 575px) {
  .work-details-area .section-info .title {
    font-size: 28px;
  }
}

.work-details-area .section-info .content {
  margin-top: 2px;
}

.work-details-area .section-info .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.work-details-area .section-info .feature-list {
  margin-top: 28px;
}

.work-details-area .section-info .feature-list li {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--primary);
  position: relative;
  display: flex;
  align-items: center;
}

.work-details-area .section-info .feature-list li:before {
  content: "+";
  margin-right: 6px;
}

.work-details-area .gallery-wrapper {
  padding: 0 50px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1199px) {
  .work-details-area .gallery-wrapper {
    padding: 0 10px;
  }
}

.work-details-area .gallery-wrapper>*:nth-child(1) {
  grid-column: span 2;
}

.work-details-area .gallery-wrapper>*:nth-child(3) {
  grid-column: span 3;
}

.work-details-area .gallery-wrapper .image {
  border-radius: 20px;
}

@media only screen and (max-width: 767px) {
  .work-details-area .gallery-wrapper .image {
    border-radius: 5px;
  }
}

.work-details-area .details-info .title {
  font-size: 30px;
  font-weight: 310;
  line-height: 27px;
  letter-spacing: -0.08em;
}

@media only screen and (max-width: 1199px) {
  .work-details-area .details-info .title {
    font-size: 24px;
  }
}

.work-details-area .details-info .text {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  margin-top: 16px;
}

@media only screen and (max-width: 1199px) {
  .work-details-area .details-info .text {
    font-size: 18px;
  }
}

.work-details-area .section-details {
  margin-top: 41px;
  margin-bottom: 93px;
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 1fr;
  max-width: 1120px;
  margin-left: auto;
}

@media only screen and (max-width: 1919px) {
  .work-details-area .section-details {
    margin-top: 41px;
    margin-bottom: 63px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-details-area .section-details {
    margin-top: 31px;
    margin-bottom: 43px;
  }
}

@media only screen and (max-width: 767px) {
  .work-details-area .section-details {
    grid-template-columns: 1fr;
  }
}

.work-details-area .gallery-wrapper-2 {
  padding: 0 50px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media only screen and (max-width: 1199px) {
  .work-details-area .gallery-wrapper-2 {
    padding: 0 10px;
  }
}

.work-details-area .gallery-wrapper-2 .image {
  border-radius: 20px;
}

@media only screen and (max-width: 767px) {
  .work-details-area .gallery-wrapper-2 .image {
    border-radius: 5px;
  }
}

.work-details-area .pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1px;
}

.work-details-area .pagination a {
  border: 1px solid var(--border);
  width: 170px;
  height: 90px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 90px;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .work-details-area .pagination a {
    width: 150px;
    height: 70px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-details-area .pagination a {
    width: 120px;
    height: 50px;
  }
}

.work-details-area .pagination a:hover {
  background-color: var(--primary);
  border-color: transparent;
  color: var(--white);
}

.dark .work-details-area .pagination a:hover {
  color: var(--black);
}

.work-details-area .pagination a:hover svg * {
  fill: var(--white);
}

.dark .work-details-area .pagination a:hover svg * {
  fill: var(--black);
}

.work-details-area .pagination a svg * {
  fill: var(--primary);
}

/* work page css */
.work-area-work-page .section-header {
  border-top: 1px solid var(--border);
  padding-top: 37px;
}

@media only screen and (max-width: 991px) {
  .work-area-work-page .section-header {
    padding-top: 7px;
  }
}

.work-area-work-page .section-title-wrapper {
  display: grid;
  gap: 15px 60px;
  grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
  .work-area-work-page .section-title-wrapper {
    grid-template-columns: 1fr 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .work-area-work-page .section-title-wrapper {
    grid-template-columns: 1fr 850px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-area-work-page .section-title-wrapper {
    grid-template-columns: 1fr 750px;
  }
}

@media only screen and (max-width: 991px) {
  .work-area-work-page .section-title-wrapper {
    grid-template-columns: 1fr;
  }
}

.work-area-work-page .subtitle-wrapper {
  margin-top: 8px;
}

.work-area-work-page .section-title {
  max-width: 800px;
}

@media only screen and (max-width: 1919px) {
  .work-area-work-page .section-title {
    max-width: 700px;
  }
}

@media only screen and (max-width: 1399px) {
  .work-area-work-page .section-title {
    max-width: 640px;
  }
}

.work-area-work-page .section-content .text {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  max-width: 490px;
}

.work-area-work-page .info-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  position: relative;
  display: flex;
  align-items: center;
}

.work-area-work-page .info-list li:before {
  content: "+";
  margin-right: 5px;
}

.work-area-work-page .section-content-wrapper {
  margin-top: 84px;
  margin-bottom: 93px;
  max-width: 1235px;
  margin-left: auto;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 200px 1fr;
}

@media only screen and (max-width: 1919px) {
  .work-area-work-page .section-content-wrapper {
    margin-top: 54px;
    margin-bottom: 53px;
    max-width: 1000px;
  }
}

@media only screen and (max-width: 1399px) {
  .work-area-work-page .section-content-wrapper {
    margin-top: 44px;
    max-width: 900px;
  }
}

@media only screen and (max-width: 1199px) {
  .work-area-work-page .section-content-wrapper {
    max-width: 750px;
    margin-bottom: 43px;
  }
}

@media only screen and (max-width: 991px) {
  .work-area-work-page .section-content-wrapper {
    grid-template-columns: 1fr;
  }
}

.work-area-work-page .works-wrapper-box .container.large {
  max-width: 1850px;
}

@media (min-width: 992px) {
  .work-area-work-page .work-area-2-inner {
    padding-top: 0px !important;
  }
}

.works-wrapper-8 {
  display: grid;
  gap: 68px 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 1919px) {
  .works-wrapper-8 {
    gap: 48px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .works-wrapper-8 {
    gap: 38px 20px;
  }
}

@media (max-width: 575px) {
  .works-wrapper-8 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.works-wrapper-8>* .image {
  transform-origin: bottom right;
}

.works-wrapper-8>*:nth-child(2n) .image {
  transform-origin: bottom left;
}

.works-wrapper-8 .work-box .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

.works-wrapper-8 .work-box .thumb:hover .t-btn {
  opacity: 1;
}

.works-wrapper-8 .work-box .thumb .image {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  transform: scale(0.9);
}

.works-wrapper-8 .work-box .thumb .image img {
  transform-origin: center;
}

.works-wrapper-8 .work-box .thumb img {
  width: 100%;
  cursor: none;
}

.works-wrapper-8 .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-8 .work-box .content {
  margin-top: 14px;
}

.works-wrapper-8 .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-8 .work-box .title {
    font-size: 22px;
  }
}

@media only screen and (max-width: 767px) {
  .works-wrapper-8 .work-box .title {
    font-size: 20px;
  }
}

.works-wrapper-8 .work-box .meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 10px;
}

.works-wrapper-8 .work-box .meta span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
}

.works-wrapper-8 .work-box .meta span:not(:first-child):before {
  content: "";
  width: 10px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
  margin-inline-end: 5px;
}

/* header area style  */
.header-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area__inner {
  display: flex;
  align-items: center;
  gap: 0px;
  position: relative;
  height: 100px;
}

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

.header-area__inner>*:nth-child(2) {
  margin-inline-end: auto;
}

@media (min-width: 1800px) {
  .header-area .container.large {
    max-width: 1750px;
  }
}

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

.header-area .header__logo {
  border: 1px solid var(--border);
  padding: 17px 30px;
  border-radius: 60px;
}

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

.header-area .header__logo img {
  max-width: 95px;
}

.header-area .header__nav {
  border: 1px solid var(--border);
  border-radius: 60px;
  padding: 0 13px;
}

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

.header-area .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 21px 17px;
}

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

.header-area .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area .header__meta {
    display: none;
  }
}

@media (max-width: 575px) {
  .header-area .header__button {
    display: none;
  }
}

.header-area .rr-btn {
  font-size: 16px;
  padding: 22px 38px;
  letter-spacing: -0.04em;
}

@media only screen and (max-width: 1199px) {
  .header-area .rr-btn {
    padding: 17px 33px;
  }
}

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

/* header area 2 style  */
.header-area-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area-2__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 80px;
}

@media only screen and (max-width: 1199px) {
  .header-area-2__inner {
    height: 70px;
    gap: 10px;
  }
}

.header-area-2__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

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

.dark .header-area-2 .header__logo .light-logo {
  display: none;
}

.header-area-2 .header__logo .dark-logo {
  display: none;
}

.dark .header-area-2 .header__logo .dark-logo {
  display: block;
}

.header-area-2 .header__logo img {
  max-width: 120px;
}

.header-area-2 .header__nav {
  margin-right: -50%;
}

.header-area-2 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 21px 17px;
}

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

.header-area-2 .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area-2 .header__meta {
    display: none;
  }
}

@media (max-width: 575px) {
  .header-area-2 .header__button {
    display: none;
  }
}

.header-area-2 .rr-btn {
  padding: 16px 28px;
  font-size: 16px;
  letter-spacing: -0.04em;
}

.header-area-2 .side-toggle {
  width: 50px;
  height: 50px;
  background-color: #F1E8E1;
  border-radius: 50%;
}

.dark .header-area-2 .side-toggle {
  background-color: #1D1C1C;
}

.header-area-2 .side-toggle i {
  font-size: 22px;
}

/* header area 3 style  */
.header-area-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area-3__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding-top: 35px;
}

@media only screen and (max-width: 1199px) {
  .header-area-3__inner {
    padding-top: 25px;
  }
}

.header-area-3__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

@media (min-width: 1850px) {
  .header-area-3 .container.large {
    max-width: 1850px;
  }
}

.header-area-3 .header__logo img {
  max-width: 120px;
}

.header-area-3 .menu li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  padding: 0 0;
  color: var(--primary);
}

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

.header-area-3 .menu>ul {
  display: block;
}

.header-area-3 .main-menu ul:hover li {
  opacity: 0.3;
}

.header-area-3 .main-menu ul li {
  font-size: 22px;
  line-height: 30px;
  color: var(--primary);
  transition-property: opacity;
  transition-duration: 500ms;
}

.header-area-3 .main-menu ul li:hover {
  opacity: 1;
}

.header-area-3 .main-menu ul li:hover a strong {
  opacity: 1;
  top: -23px;
}

.header-area-3 .main-menu ul li a strong {
  opacity: 0;
  transition-property: opacity, top;
  transition-duration: 250ms;
}

.header-area-3 .side-toggle {
  width: 50px;
  height: 50px;
  background-color: #F1E8E1;
  border-radius: 50%;
}

.dark .header-area-3 .side-toggle {
  background-color: #1D1C1C;
}

.header-area-3 .side-toggle i {
  font-size: 22px;
}

.dark .header-area-3 .side-toggle {
  background-color: #1D1C1C;
}

/* header area 4 style  */
.header-area-4 {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
}

.header-area-4__inner {
  display: flex;
  border-top: 1px solid var(--black);
  padding-top: 20px;
  gap: 10px;
  position: relative;
  height: 80px;
}

@media only screen and (max-width: 1199px) {
  .header-area-4__inner {
    height: 70px;
    gap: 10px;
  }
}

.header-area-4__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

@media (min-width: 1650px) {
  .header-area-4 .container.large {
    max-width: 1650px;
  }
}

.header-area-4 .header__logo img {
  max-width: 120px;
}

.header-area-4 .header__middel {
  margin-right: 320px;
}

@media only screen and (max-width: 1199px) {
  .header-area-4 .header__middel {
    margin-left: 100px;
  }
}

@media only screen and (max-width: 991px) {
  .header-area-4 .header__middel {
    display: none;
  }
}

.header-area-4 .header__middel p {
  text-transform: uppercase;
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.header-area-4 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 21px 17px;
}

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

.header-area-4 .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area-4 .header__meta {
    display: none;
  }
}

.header-area-4 .header__navicon button {
  text-transform: uppercase;
}

/* header area 5 style  */
.header-area-5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area-5__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

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

.header-area-5__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

.header-area-5 .header__logo img {
  max-width: 120px;
}

.header-area-5 .main-menu li a {
  padding: 31px 15px;
}

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

.header-area-5 .menu li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  padding: 0 0;
  position: relative;
  color: var(--primary);
}

.header-area-5 .menu li a::before {
  width: 0;
  height: 1px;
  background-color: currentColor;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
}

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

.header-area-5 .menu li a:hover::before {
  width: 100%;
}

.header-area-5 .menu>ul {
  display: flex;
  gap: 40px;
}

.header-area-5 .side-toggle {
  width: 40px;
  height: 40px;
  background-color: #F1E8E1;
  border-radius: 50%;
}

.dark .header-area-5 .side-toggle {
  background-color: #1D1C1C;
}

.header-area-5 .side-toggle i {
  font-size: 22px;
}

/* header area 6 style  */
.header-area-6 {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
}

.header-area-6__inner {
  display: flex;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  gap: 10px;
  position: relative;
  height: 80px;
}

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

.header-area-6__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

@media (min-width: 1870px) {
  .header-area-6 .container.large {
    max-width: 1870px;
  }
}

.header-area-6 .header__logo img {
  max-width: 120px;
}

.header-area-6 .header__middel {
  margin-right: 320px;
}

@media only screen and (max-width: 1199px) {
  .header-area-6 .header__middel {
    margin-left: 100px;
  }
}

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

.header-area-6 .header__middel p {
  text-transform: uppercase;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.header-area-6 .main-menu li a {
  font-size: 16px;
  font-weight: 400;
  padding: 21px 17px;
}

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

.header-area-6 .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area-6 .header__meta {
    display: none;
  }
}

.header-area-6 .header__navicon button {
  text-transform: uppercase;
  font-size: 14px;
  color: var(--primary);
}

/* header area 8 style  */
.header-area-7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area-7__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 80px;
}

@media only screen and (max-width: 1199px) {
  .header-area-7__inner {
    height: 70px;
    gap: 10px;
  }
}

.header-area-7__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

@media (min-width: 1850px) {
  .header-area-7 .container.large {
    max-width: 1850px;
  }
}

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

.header-area-7 .header__logo img {
  max-width: 95px;
}

.header-area-7 .header__nav {
  margin-right: -50%;
}

.header-area-7 .main-menu>ul>li>a {
  font-size: 14px;
  font-weight: 600;
  padding: 21px 25px;
  text-transform: uppercase;
  color: var(--white);
}

.header-area-7 .main-menu>ul>li>a:hover {
  opacity: 0.8;
}

.header-area-7 .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area-7 .header__meta {
    display: none;
  }
}

.header-area-7 .side-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--white);
}

.header-area-7 .side-toggle i {
  font-size: 22px;
}

/* header area 8 style  */
.header-area-8 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.header-area-8__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 80px;
}

@media only screen and (max-width: 1199px) {
  .header-area-8__inner {
    height: 70px;
    gap: 10px;
  }
}

.header-area-8__inner>*:nth-child(1) {
  margin-inline-end: auto;
}

@media (min-width: 1850px) {
  .header-area-8 .container.large {
    max-width: 1850px;
  }
}

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

.header-area-8 .header__logo img {
  max-width: 120px;
}

.header-area-8 .header__nav {
  margin-right: -50%;
}

.header-area-8 .main-menu li a {
  font-size: 14px;
  font-weight: 600;
  padding: 21px 21px;
  text-transform: uppercase;
}

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

.header-area-8 .search-icon {
  color: var(--primary);
}

@media (max-width: 575px) {
  .header-area-8 .header__meta {
    display: none;
  }
}

.header-area-8 .side-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--primary);
}

.header-area-8 .side-toggle i {
  font-size: 22px;
}

/* footer area style  */
.footer-area .footer-top-inner {
  padding-top: 92px;
  padding-bottom: 50px;
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 660px;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-top-inner {
    padding-top: 72px;
    padding-bottom: 40px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area .footer-top-inner {
    grid-template-columns: 1fr 580px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-top-inner {
    grid-template-columns: 1fr 500px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area .footer-top-inner {
    grid-template-columns: 1fr 430px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-area .footer-top-inner {
    grid-template-columns: 1fr;
  }
}

.footer-area .footer-top-inner .info-text .text {
  max-width: 510px;
  font-size: 30px;
  line-height: 1.26;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-top-inner .info-text .text {
    font-size: 22px;
  }
}

.footer-area .footer-top-inner .info-link a {
  font-size: 30px;
  line-height: 1.5;
  color: var(--black-2);
  position: relative;
}

.dark .footer-area .footer-top-inner .info-link a {
  color: #555555;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-top-inner .info-link a {
    font-size: 22px;
  }
}

.footer-area .footer-top-inner .info-link a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition: all 0.3s;
  background-color: currentColor;
}

.footer-area .footer-top-inner .info-link a:hover {
  color: var(--black);
}

.dark .footer-area .footer-top-inner .info-link a:hover {
  color: var(--white);
}

.footer-area .footer-top-inner .info-link a:hover::before {
  width: 0;
}

.footer-area .footer-logo {
  margin-top: 8px;
  max-width: 657px;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-logo {
    max-width: 257px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-logo {
    max-width: 207px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area .footer-logo {
    max-width: 147px;
  }
}

.footer-area .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
  padding-top: 97px;
  padding-bottom: 94px;
}

@media only screen and (max-width: 1919px) {
  .footer-area .footer-widget-wrapper-box {
    padding-top: 77px;
    padding-bottom: 74px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper-box {
    padding-top: 57px;
    padding-bottom: 54px;
  }
}

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

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

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

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

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

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

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

.footer-area .subscribe-form .input-field {
  display: flex;
  gap: 10px;
  background-color: rgba(17, 17, 17, 0.05);
  padding: 28px 30px;
  border-radius: 50px;
}

.dark .footer-area .subscribe-form .input-field {
  background-color: rgba(255, 255, 255, 0.05);
}

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

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

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

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

.footer-area .subscribe-form .input-field input:-webkit-autofill,
.footer-area .subscribe-form .input-field input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

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

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

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

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

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

.footer-area .footer-widget-box .title {
  font-size: 22px;
  line-height: 20px;
  margin-bottom: 30px;
  color: var(--black-2);
  font-family: var(--font_dmsans);
  font-weight: 400;
}

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

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

@media only screen and (max-width: 991px) {
  .footer-area .footer-widget-box.newsletter {
    order: 4;
    grid-column: span 2;
  }
}

@media (max-width: 575px) {
  .footer-area .footer-widget-box.newsletter {
    grid-column: auto;
  }
}

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

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

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

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

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

.footer-area .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding: 47px 0;
}

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

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

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

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

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

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

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

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

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

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

/* footer area 2 style  */
.footer-area-2 .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
  padding-top: 97px;
  padding-bottom: 94px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-2 .footer-widget-wrapper-box {
    padding-top: 77px;
    padding-bottom: 74px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-2 .footer-widget-wrapper-box {
    padding-top: 57px;
    padding-bottom: 54px;
  }
}

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

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

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

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

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

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

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

.footer-area-2 .subscribe-form .input-field {
  display: flex;
  gap: 10px;
  background-color: #F4EDE7;
  padding: 28px 30px;
  border-radius: 50px;
}

.dark .footer-area-2 .subscribe-form .input-field {
  background-color: #1D1D1D;
}

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

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-2 .subscribe-form .input-field input {
    font-size: 18px;
  }
}

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

.dark .footer-area-2 .subscribe-form .input-field input::placeholder {
  color: rgba(252, 247, 243, 0.3);
}

.footer-area-2 .subscribe-form .input-field input:-webkit-autofill,
.footer-area-2 .subscribe-form .input-field input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

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

@media only screen and (max-width: 1199px) {
  .footer-area-2 .subscription-text {
    margin-top: 18px;
  }
}

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

@media only screen and (max-width: 1199px) {
  .footer-area-2 .subscription-text .text {
    font-size: 18px;
  }
}

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

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

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

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

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

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

@media only screen and (max-width: 991px) {
  .footer-area-2 .footer-widget-box.newsletter {
    order: 4;
    grid-column: span 2;
  }
}

@media (max-width: 575px) {
  .footer-area-2 .footer-widget-box.newsletter {
    grid-column: auto;
  }
}

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

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

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

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

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

.footer-area-2 .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding: 47px 0;
}

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

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

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

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

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

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

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

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

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

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

/* footer area 3 style  */
.footer-area-3 .footer-widget-wrapper-box {
  padding-top: 97px;
  padding-bottom: 94px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-3 .footer-widget-wrapper-box {
    padding-top: 77px;
    padding-bottom: 74px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-3 .footer-widget-wrapper-box {
    padding-top: 57px;
    padding-bottom: 54px;
  }
}

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

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

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

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

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

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

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

.footer-area-3 .subscribe-form .input-field {
  display: flex;
  gap: 10px;
  background-color: rgba(17, 17, 17, 0.05);
  padding: 28px 30px;
  border-radius: 50px;
}

.dark .footer-area-3 .subscribe-form .input-field {
  background-color: rgba(255, 255, 255, 0.05);
}

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

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-3 .subscribe-form .input-field input {
    font-size: 18px;
  }
}

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

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-3 .subscription-text {
    margin-top: 18px;
  }
}

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

@media only screen and (max-width: 1199px) {
  .footer-area-3 .subscription-text .text {
    font-size: 18px;
  }
}

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

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

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

.footer-area-3 .footer-widget-box .title {
  font-size: 22px;
  line-height: 20px;
  margin-bottom: 30px;
  color: var(--black-2);
  font-family: var(--font_dmsans);
  font-weight: 400;
}

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

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

@media only screen and (max-width: 991px) {
  .footer-area-3 .footer-widget-box.newsletter {
    order: 4;
    grid-column: span 2;
  }
}

@media (max-width: 575px) {
  .footer-area-3 .footer-widget-box.newsletter {
    grid-column: auto;
  }
}

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-3 .footer-nav-list li {
    font-size: 18px;
  }
}

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

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

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

.footer-area-3 .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding: 47px 0;
}

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

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

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

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

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

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

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

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

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

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

/* footer area 4 style  */
.footer-area-4 .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
  padding-top: 60px;
  padding-bottom: 60px;
  margin-top: 50px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-4 .footer-widget-wrapper-box {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area-4 .footer-widget-wrapper-box {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

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

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

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

.footer-area-4 .footer-logo img {
  max-width: 120px;
}

.footer-area-4 .footer-nav-list {
  display: flex;
  gap: 5px 40px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 1199px) {
  .footer-area-4 .footer-nav-list {
    gap: 5px 30px;
  }
}

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

.footer-area-4 .footer-nav-list li {
  font-size: 20px;
  line-height: 28px;
  color: var(--primary);
  transition-property: opacity;
  transition-duration: 500ms;
}

@media only screen and (max-width: 1199px) {
  .footer-area-4 .footer-nav-list li {
    font-size: 18px;
  }
}

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

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

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

.footer-area-4 .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding-top: 36px;
  padding-bottom: 55px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-4 .copyright-area-inner {
    padding-top: 31px;
    padding-bottom: 35px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-4 .copyright-area-inner {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

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

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

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

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

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

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

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

.footer-area-6-inner {
  padding-bottom: 40px;
  padding-top: 134px;
}

@media only screen and (max-width: 991px) {
  .footer-area-6-inner {
    padding-top: 100px;
  }
}

@media (max-width: 575px) {
  .footer-area-6-inner {
    padding-top: 50px;
  }
}

.footer-area-6 .footer-widget-wrapper {
  display: flex;
  gap: 140px;
  justify-content: space-between;
  padding-bottom: 200px;
}

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

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget-wrapper {
    gap: 80px;
    padding-bottom: 120px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-6 .footer-widget-wrapper {
    gap: 50px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-area-6 .footer-widget-wrapper {
    gap: 30px;
    padding-bottom: 40px;
  }
}

@media (max-width: 575px) {
  .footer-area-6 .footer-widget-wrapper {
    flex-wrap: wrap;
  }
}

.footer-area-6 .footer-widget__media {
  margin-left: auto;
}

@media (max-width: 575px) {
  .footer-area-6 .footer-widget__media {
    margin-right: auto;
    margin-left: auto;
  }
}

.footer-area-6 .footer-widget__content {
  max-width: 1130px;
}

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget__content {
    max-width: 1000px;
  }
}

@media (max-width: 575px) {
  .footer-area-6 .footer-widget__content {
    max-width: 100%;
  }
}

.footer-area-6 .footer-widget__content-wrapper {
  border-top: 1px solid var(--border);
  padding-top: 30px;
  display: flex;
  gap: 240px;
}

@media only screen and (max-width: 1399px) {
  .footer-area-6 .footer-widget__content-wrapper {
    gap: 150px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget__content-wrapper {
    gap: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-6 .footer-widget__content-wrapper {
    flex-wrap: wrap;
  }
}

.footer-area-6 .footer-widget__content-item span {
  font-size: 14px;
  color: var(--primary);
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 45px;
  display: inline-block;
}

@media only screen and (max-width: 991px) {
  .footer-area-6 .footer-widget__content-item span {
    margin-bottom: 20px;
  }
}

.footer-area-6 .footer-widget__content-item .description {
  max-width: 440px;
  color: var(--primary);
  font-size: 30px;
  line-height: 38px;
  letter-spacing: -0.6px;
}

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget__content-item .description {
    font-size: 25px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-6 .footer-widget__content-item .description {
    max-width: 100%;
    font-size: 22px;
  }
}

.footer-area-6 .footer-widget-title {
  font-size: 100px;
  line-height: 0.95;
  letter-spacing: -5px;
  margin-bottom: 100px;
}

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget-title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-6 .footer-widget-title {
    font-size: 50px;
    letter-spacing: 0;
    margin-bottom: 50px;
  }
}

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

.footer-area-6 .footer-widget-nav-list {
  padding-left: 27px;
}

.footer-area-6 .footer-widget-nav-list li {
  position: relative;
}

.footer-area-6 .footer-widget-nav-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  background-color: var(--primary);
  position: absolute;
  left: 0;
  transform: translate(-27px, 15px);
  margin-right: 30px;
}

.footer-area-6 .footer-widget-nav-list li:not(:last-child) {
  margin-bottom: 5px;
}

.footer-area-6 .footer-widget-nav-list li a {
  font-size: 30px;
  line-height: 36px;
  color: var(--primary);
  text-transform: capitalize;
}

@media only screen and (max-width: 1199px) {
  .footer-area-6 .footer-widget-nav-list li a {
    font-size: 20px;
    line-height: 30px;
  }
}

.footer-area-6 .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding-top: 40px;
}

.footer-area-6 .copyright-socail-list {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px 41px;
  position: relative;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .footer-area-6 .copyright-socail-list {
    gap: 10px 30px;
  }
}

.footer-area-6 .copyright-socail-list::before {
  width: 150px;
  height: 1px;
  content: "";
  position: absolute;
  bottom: 0;
  background-color: var(--border);
}

.footer-area-6 .copyright-socail-list li {
  position: relative;
}

.footer-area-6 .copyright-socail-list li:not(:last-child)::before {
  content: "";
  width: 1px;
  height: 10px;
  right: -50%;
  position: absolute;
  background-color: #999999;
  transform: translate(-10px, 3px);
}

.dark .footer-area-6 .copyright-socail-list li:not(:last-child)::before {
  background-color: #555555;
}

@media (max-width: 575px) {
  .footer-area-6 .copyright-socail-list li:not(:last-child)::before {
    transform: translate(-17px, 3px);
  }
}

.footer-area-6 .copyright-socail-list li a {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  position: relative;
}

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

.footer-area-6 .copyright-socail-list li a:hover {
  color: #999999;
}

.footer-area-6 .copyright-socail-list li a:hover::before {
  width: 100%;
}

.footer-area-6 .copyright-text {
  padding-top: 20px;
}

.footer-area-6 .copyright-text .text {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
}

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

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

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

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

/* footer area inner page style  */
.footer-area-inner-page .footer-top-inner {
  padding-top: 50px;
  border-top: 1px solid var(--border);
  padding-bottom: 50px;
  margin-top: 50px;
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 660px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .footer-top-inner {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 30px;
  }
}

@media only screen and (max-width: 1399px) {
  .footer-area-inner-page .footer-top-inner {
    grid-template-columns: 1fr 580px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .footer-top-inner {
    grid-template-columns: 1fr 470px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-inner-page .footer-top-inner {
    grid-template-columns: 1fr 430px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-area-inner-page .footer-top-inner {
    grid-template-columns: 1fr;
  }
}

.footer-area-inner-page .footer-top-inner .info-text .text {
  max-width: 510px;
  font-size: 30px;
  line-height: 1.26;
  color: var(--primary);
}

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .footer-top-inner .info-text .text {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .footer-top-inner .info-text .text {
    font-size: 18px;
  }
}

.footer-area-inner-page .footer-top-inner .info-link a {
  font-size: 30px;
  line-height: 1.5;
  color: var(--black-2);
  position: relative;
}

.dark .footer-area-inner-page .footer-top-inner .info-link a {
  color: #555555;
}

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .footer-top-inner .info-link a {
    font-size: 22px;
  }
}

.footer-area-inner-page .footer-top-inner .info-link a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition: all 0.3s;
  background-color: currentColor;
}

.footer-area-inner-page .footer-top-inner .info-link a:hover {
  color: var(--primary);
}

.footer-area-inner-page .footer-top-inner .info-link a:hover::before {
  width: 0;
}

.footer-area-inner-page .footer-logo {
  margin-top: 8px;
  max-width: 657px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .footer-logo {
    max-width: 257px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .footer-logo {
    max-width: 207px;
  }
}

@media only screen and (max-width: 991px) {
  .footer-area-inner-page .footer-logo {
    max-width: 147px;
  }
}

.footer-area-inner-page .footer-widget-wrapper-box {
  border-top: 1px solid var(--border);
  padding-top: 97px;
  padding-bottom: 94px;
}

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .footer-widget-wrapper-box {
    padding-top: 77px;
    padding-bottom: 74px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .footer-widget-wrapper-box {
    padding-top: 57px;
    padding-bottom: 54px;
  }
}

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

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

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

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

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

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

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

.footer-area-inner-page .subscribe-form .input-field {
  display: flex;
  gap: 10px;
  background-color: rgba(17, 17, 17, 0.05);
  padding: 32px 30px;
  border-radius: 50px;
}

.dark .footer-area-inner-page .subscribe-form .input-field {
  background-color: rgba(255, 255, 255, 0.05);
}

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .subscribe-form .input-field input {
    font-size: 18px;
  }
}

.footer-area-inner-page .subscribe-form .input-field input::placeholder {
  line-height: 1;
  color: rgba(17, 17, 17, 0.3);
}

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

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

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

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .subscription-text .text {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .subscription-text .text {
    font-size: 18px;
  }
}

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

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

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

.footer-area-inner-page .footer-widget-box .title {
  font-size: 22px;
  line-height: 20px;
  margin-bottom: 30px;
  color: var(--black-2);
  font-family: var(--font_dmsans);
}

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

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

@media only screen and (max-width: 991px) {
  .footer-area-inner-page .footer-widget-box.newsletter {
    order: 4;
    grid-column: span 2;
  }
}

@media (max-width: 575px) {
  .footer-area-inner-page .footer-widget-box.newsletter {
    grid-column: auto;
  }
}

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

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

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .footer-nav-list li {
    font-size: 18px;
  }
}

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

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

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

.footer-area-inner-page .copyright-area-inner {
  border-top: 1px solid var(--border);
  padding: 47px 0;
}

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

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

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

@media only screen and (max-width: 1919px) {
  .footer-area-inner-page .copyright-text .text {
    font-size: 22px;
  }
}

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

@media only screen and (max-width: 1199px) {
  .footer-area-inner-page .copyright-text .text {
    font-size: 18px;
  }
}

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

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

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

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

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

/* web development page css */
.rr-primary-btn {
  background-color: var(--rr-color-theme-primary);
  font-family: var(--rr-ff-body);
  color: var(--rr-color-common-white);
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 22px 30px;
  border-radius: 0px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.rr-primary-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.rr-primary-btn i {
  margin-left: 10px;
  font-size: 14px;
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out;
}

.rr-primary-btn:hover {
  color: var(--rr-color-common-white);
}

.rr-primary-btn:hover:before {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.rr-primary-btn:hover i {
  transform: rotate(0deg);
}

.rr-primary-btn:focus {
  color: var(--rr-color-common-white);
}

.rr-primary-btn.transparent {
  background-color: transparent;
  border: 1px solid var(--rr-color-theme-primary);
  color: var(--rr-color-heading-primary);
}

.rr-primary-btn.transparent:hover {
  color: var(--rr-color-common-white);
}

.rr-primary-btn.transparent:before {
  background-color: var(--rr-color-theme-primary);
}

.web-development.dark {
  background-color: #02050A;
}

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

.pb-130 {
  padding-bottom: 130px;
}

@media only screen and (max-width: 992px) {
  .pb-130 {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .pb-130 {
    padding-bottom: 60px;
  }
}

.pt-130 {
  padding-top: 130px;
}

@media only screen and (max-width: 992px) {
  .pt-130 {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .pt-130 {
    padding-top: 60px;
  }
}

.bg-dark-1 {
  background-color: var(--rr-color-bg-1);
}

.reveal {
  visibility: hidden;
  position: relative;
  width: 80%;
  height: 80%;
  overflow: hidden;
}

.reveal img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform-origin: left;
}

.anim-text {
  overflow: hidden;
}

:root {
  --rr-ff-body: "Plus Jakarta Sans", sans-serif;
  --rr-ff-heading: "Plus Jakarta Sans", serif;
  --rr-ff-p: "Plus Jakarta Sans", sans-serif;
  --rr-fw-normal: normal;
  --rr-fw-thin: 100;
  --rr-fw-elight: 200;
  --rr-fw-light: 300;
  --rr-fw-regular: 400;
  --rr-fw-medium: 500;
  --rr-fw-sbold: 600;
  --rr-fw-bold: 700;
  --rr-fw-ebold: 800;
  --rr-fw-black: 900;
  --rr-fs-body: 16px;
  --rr-fs-p: 16px;
  --rr-fs-h1: 60px;
  --rr-fs-h2: 48px;
  --rr-fs-h3: 24px;
  --rr-fs-h4: 20px;
  --rr-fs-h5: 16px;
  --rr-fs-h6: 14px;
  --rr-color-common-white: #ffffff;
  --rr-color-common-black: #000000;
  --rr-color-common-dark: #232323;
  --rr-color-heading-primary: #11151C;
  --rr-color-text-body: #B0B2B7;
  --rr-color-text-body-light: #74787C;
  --rr-color-theme-primary: #3F5AF3;
  --rr-color-theme-secondary: #ffc226;
  --rr-color-bg-1: #11151C;
  --rr-color-grey-1: #F8F8F8;
  --rr-color-grey-2: #2D343E;
  --rr-color-grey-light: #F2F3F4;
  --rr-color-border-1: #1E2228;
  --rr-color-border-light: #E4E4E4;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-heading {
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 992px) {
  .section-heading {
    margin-bottom: 40px;
  }
}

.section-heading .section-title {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
  display: block;
  margin-bottom: 0;
  text-transform: inherit;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .section-heading .section-title {
    font-size: 40px;
  }

  .section-heading .section-title br {
    display: none;
  }
}

@media only screen and (max-width: 992px) {
  .section-heading .section-title {
    font-size: 32px;
    max-width: 100%;
  }
}

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

.section-heading .sub-heading {
  font-family: var(--rr-ff-p);
  color: var(--rr-color-theme-primary);
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 25px;
  text-transform: uppercase;
  position: relative;
  padding: 0 50px;
  overflow: hidden;
}

@media only screen and (max-width: 992px) {
  .section-heading .sub-heading {
    font-size: 14px;
  }
}

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

.section-heading .sub-heading:after,
.section-heading .sub-heading:before {
  background: linear-gradient(270deg, rgba(63, 90, 243, 0.4) 0%, transparent 100%);
  content: "";
  width: 37px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.section-heading .sub-heading:after {
  background: linear-gradient(90deg, rgba(63, 90, 243, 0.4) 0%, transparent 100%);
  left: auto;
  right: 10px;
}

.section-heading .sub-heading.active:before {
  left: 0;
  opacity: 1;
}

.section-heading .sub-heading.active:after {
  right: 0;
  opacity: 1;
}

.section-heading .sub-heading.after-none:after {
  display: none;
}

.section-heading.heading-3 .section-title {
  font-size: 40px;
  text-transform: uppercase;
}

@media only screen and (max-width: 992px) {
  .section-heading.heading-3 .section-title {
    font-size: 28px;
    line-height: 1.4;
  }
}

.hero-section-3 {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

.hero-section-3 .hero-round-img {
  width: 950px;
  height: 950px;
  position: absolute;
  top: -20%;
  right: -15%;
  border-radius: 50%;
}

@media (max-width: 1199px) {
  .hero-section-3 .hero-round-img {
    right: -35%;
    top: -35%;
  }
}

@media only screen and (max-width: 992px) {
  .hero-section-3 .hero-round-img {
    right: -60%;
    top: -70%;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3 .hero-round-img {
    display: none;
  }
}

.hero-section-3 .hero-round-img:before {
  background-color: var(--rr-color-theme-primary);
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.hero-section-3 .hero-round-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  object-position: -266px 100px;
}

.hero-section-3 .round-shape {
  background-color: #02050A;
  height: 800px;
  width: 800px;
  border-radius: 50%;
  position: absolute;
  top: -29%;
  right: -21%;
}

@media (max-width: 1199px) {
  .hero-section-3 .round-shape {
    right: -45%;
    top: -45%;
  }
}

@media only screen and (max-width: 992px) {
  .hero-section-3 .round-shape {
    height: 600px;
    width: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3 .round-shape {
    display: none;
  }
}

.hero-section-3 .round-shape-2 {
  height: 750px;
  width: 750px;
  border-radius: 50%;
  position: absolute;
  bottom: -50%;
  right: 14%;
  opacity: 0.46;
  background-color: var(--rr-color-grey-light);
}

@media (max-width: 1199px) {
  .hero-section-3 .round-shape-2 {
    height: 600px;
    width: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3 .round-shape-2 {
    display: none;
  }
}

.dark .hero-section-3 .round-shape-2 {
  background-color: var(--rr-color-bg-1);
}

.hero-section-3 .border-shape {
  background-color: transparent;
  height: 700px;
  width: 700px;
  border-radius: 50%;
  border: 1px dashed var(--rr-color-bg-1);
  opacity: 0.1;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (max-width: 992px) {
  .hero-section-3 .border-shape {
    display: none;
  }
}

.dark .hero-section-3 .border-shape {
  opacity: 100%;
}

.hero-section-3 .scroll-down-btn {
  width: 41px;
  height: 80px;
  margin: 0 auto;
  position: absolute;
  bottom: 150px;
  left: 49%;
  transform: translateX(-50%);
  z-index: 90;
  animation: hero-anim-2 1s infinite linear alternate-reverse;
}

@media only screen and (max-width: 992px) {
  .hero-section-3 .scroll-down-btn {
    bottom: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-3 .scroll-down-btn {
    bottom: 30px;
    left: 43%;
  }
}

.dark .hero-section-3 .scroll-down-btn .light-img {
  display: none;
}

.hero-section-3 .scroll-down-btn .dark-img {
  display: none;
}

.dark .hero-section-3 .scroll-down-btn .dark-img {
  display: block;
}

@-webkit-keyframes hero-anim-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
}

@keyframes hero-anim-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
}

.hero-content-3 {
  padding: 360px 0 250px 0;
  padding-left: 75px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1199px) {
  .hero-content-3 {
    padding-top: 250px;
  }
}

@media only screen and (max-width: 992px) {
  .hero-content-3 {
    padding-top: 100px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-3 {
    padding-top: 80px;
    padding-left: 20px;
  }
}

.hero-content-3 .title {
  font-size: 120px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-content-3 .title.anim-text {
  overflow: visible;
}

.hero-content-3 .title br {
  display: block;
}

@media (max-width: 1199px) {
  .hero-content-3 .title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-3 .title {
    font-size: 32px;
  }
}

.hero-content-3 .title span {
  color: var(--rr-color-theme-primary);
  position: relative;
}

.hero-content-3 .title span:before {
  background-image: url(../../assets/imgs/web-development/hero-shape-4-light.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
  width: 770px;
  height: 770px;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@media (max-width: 1199px) {
  .hero-content-3 .title span:before {
    width: 600px;
    height: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-3 .title span:before {
    width: 250px;
    height: 250px;
  }
}

.dark .hero-content-3 .title span:before {
  background-image: url(../../assets/imgs/web-development/hero-shape-4.png);
}

.hero-content-3 p {
  font-size: 22px;
  font-weight: 500;
  max-width: 880px;
  width: 100%;
  line-height: 1.8;
  margin-bottom: 40px;
  color: #74787C;
}

.dark .hero-content-3 p {
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 767px) {
  .hero-content-3 p {
    font-size: 16px;
  }
}

/**----------------------------------------
START: About CSS
----------------------------------------*/
.about-section-4 {
  position: relative;
  z-index: 1;
}

.about-section-4 .shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
}

@media (max-width: 1199px) {
  .about-section-4 .shape {
    bottom: 50px;
  }
}

@media only screen and (max-width: 992px) {
  .about-section-4 .shape {
    display: none;
  }
}

.dark .about-section-4 .shape {
  opacity: 1;
}

.about-img-wrap-4 {
  position: relative;
  text-align: right;
  max-width: 670px;
  width: 100%;
}

.about-img-wrap-4 .img-1 {
  max-width: 550px;
  width: 100%;
  height: 600px;
  margin-left: auto;
}

@media only screen and (max-width: 767px) {
  .about-img-wrap-4 .img-1 {
    height: 400px;
  }
}

.about-img-wrap-4 .img-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-img-wrap-4 .img-2 {
  height: 255px;
  width: 255px;
  position: absolute;
  bottom: 50px;
  left: 0;
  border-top: 10px solid var(--rr-color-common-white);
  border-right: 10px solid var(--rr-color-common-white);
}

.dark .about-img-wrap-4 .img-2 {
  border-top: 10px solid #02050A;
  border-right: 10px solid #02050A;
}

@media only screen and (max-width: 767px) {
  .about-img-wrap-4 .img-2 {
    bottom: 0;
  }
}

.about-img-wrap-4 .img-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content-4 {
  padding-left: 50px;
}

@media (max-width: 1199px) {
  .about-content-4 {
    padding-left: 10px;
  }
}

@media only screen and (max-width: 992px) {
  .about-content-4 {
    margin-top: 30px;
    padding-left: 0;
  }
}

.about-content-4 .section-heading .section-title {
  margin-bottom: 40px;
}

.about-content-4 .section-heading p {
  margin-bottom: 40px;
  color: #74787C;
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
}

.dark .about-content-4 .section-heading p {
  color: var(--rr-color-text-body);
}

.about-content-4 .about-counter-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 20px;
  margin-bottom: 40px;
  max-width: 610px;
  width: 100%;
}

.about-content-4 .about-counter-wrap .about-counter {
  display: grid;
  align-items: center;
  grid-template-columns: 60px 1fr;
  grid-gap: 20px;
}

.about-content-4 .about-counter-wrap .about-counter .title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 0;
}

.about-content-4 .about-counter-wrap .about-counter p {
  margin-bottom: 0;
  color: #74787C;
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
}

.dark .about-content-4 .about-counter-wrap .about-counter p {
  color: var(--rr-color-text-body);
}

.about-content-4 .about-counter-wrap .about-counter:hover .icon img {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.service-left .section-heading .section-title {
  margin-bottom: 30px;
}

.service-box-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 860px;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .service-box-wrap {
    grid-template-columns: 1fr;
  }
}

.service-box-wrap .service-box {
  background-color: var(--rr-color-bg-1);
  position: relative;
  padding: 40px;
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box {
    padding: 30px 20px;
  }
}

.service-box-wrap .service-box .number {
  color: #222731;
  font-size: 48px;
  font-weight: 700;
  position: absolute;
  top: 40px;
  right: 40px;
  line-height: 1;
  display: block;
  font-style: italic;
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box .number {
    top: 30px;
    right: 20px;
  }
}

.service-box-wrap .service-box .icon {
  margin-bottom: 30px;
}

.service-box-wrap .service-box .icon svg {
  color: var(--rr-color-theme-primary);
}

.service-box-wrap .service-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
}

.service-box-wrap .service-box .service-img {
  max-width: 350px;
  width: 100%;
  height: 117px;
  position: relative;
  overflow: hidden;
}

.service-box-wrap .service-box .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.service-box-wrap .service-box .service-img:before {
  background-color: #001AAB;
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.service-box-wrap .service-box .service-img:after {
  background: radial-gradient(100% 100% at 50% 0%, rgba(63, 90, 243, 0) 0%, #3F5AF3 100%);
  filter: blur(75px);
  content: "";
  width: 255px;
  height: 255px;
  border-radius: 50%;
  position: absolute;
  top: -150%;
  left: -25%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.service-box-wrap .service-box:nth-child(1) {
  border-bottom: 1px solid var(--rr-color-border-1);
  border-right: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(1) {
    border: none;
  }
}

.service-box-wrap .service-box:nth-child(2) {
  border-bottom: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(2) {
    border: none;
  }
}

.service-box-wrap .service-box:nth-child(3) {
  border-right: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(3) {
    border: none;
  }
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(4) {
    border: none;
  }
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:not(:last-of-type) {
    border-bottom: 1px solid var(--rr-color-border-1);
  }
}

.service-box-wrap .service-box:hover .service-img:after {
  visibility: visible;
  opacity: 1;
}

.service-box-wrap .service-box:hover .service-img:before {
  visibility: visible;
  opacity: 0.4;
}

.service-box-wrap .service-box:hover .service-img img {
  transform: scale(1.03);
}

.service-box-wrap .service-box:hover .icon svg {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.service-left .section-heading .section-title {
  margin-bottom: 30px;
}

.service-box-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 860px;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .service-box-wrap {
    grid-template-columns: 1fr;
  }
}

.service-box-wrap .service-box {
  position: relative;
  padding: 40px;
  background-color: var(--rr-color-grey-light);
  border-color: var(--rr-color-border-light);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box {
    padding: 30px 20px;
  }
}

.dark .service-box-wrap .service-box {
  background-color: var(--rr-color-bg-1);
}

.service-box-wrap .service-box .number {
  font-size: 48px;
  font-weight: 700;
  position: absolute;
  top: 40px;
  color: rgba(63, 90, 243, 0.14);
  right: 40px;
  line-height: 1;
  display: block;
  font-style: italic;
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box .number {
    top: 30px;
    right: 20px;
  }
}

.dark .service-box-wrap .service-box .number {
  color: #222731;
}

.service-box-wrap .service-box .icon {
  margin-bottom: 30px;
}

.service-box-wrap .service-box .icon svg {
  color: var(--rr-color-theme-primary);
}

.service-box-wrap .service-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
}

.service-box-wrap .service-box .service-img {
  max-width: 350px;
  width: 100%;
  height: 117px;
  position: relative;
  overflow: hidden;
}

.service-box-wrap .service-box .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.service-box-wrap .service-box .service-img:before {
  background-color: #001AAB;
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.service-box-wrap .service-box .service-img:after {
  background: radial-gradient(100% 100% at 50% 0%, rgba(63, 90, 243, 0) 0%, #3F5AF3 100%);
  filter: blur(75px);
  content: "";
  width: 255px;
  height: 255px;
  border-radius: 50%;
  position: absolute;
  top: -150%;
  left: -25%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.service-box-wrap .service-box:nth-child(1) {
  background-color: var(--rr-color-grey-light);
  border-color: var(--rr-color-border-light);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(1) {
    border: none;
  }
}

.dark .service-box-wrap .service-box:nth-child(1) {
  border-bottom: 1px solid var(--rr-color-border-1);
  border-right: 1px solid var(--rr-color-border-1);
  background-color: var(--rr-color-bg-1);
}

.service-box-wrap .service-box:nth-child(2) {
  border-color: var(--rr-color-border-light);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(2) {
    border: none;
  }
}

.dark .service-box-wrap .service-box:nth-child(2) {
  border-bottom: 1px solid var(--rr-color-border-1);
}

.service-box-wrap .service-box:nth-child(3) {
  border-color: var(--rr-color-border-light);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(3) {
    border: none;
  }
}

.dark .service-box-wrap .service-box:nth-child(3) {
  border-right: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:nth-child(4) {
    border: none;
  }
}

@media only screen and (max-width: 767px) {
  .service-box-wrap .service-box:not(:last-of-type) {
    border-bottom: 1px solid var(--rr-color-border-1);
  }
}

.service-box-wrap .service-box:hover .service-img:after {
  visibility: visible;
  opacity: 1;
}

.service-box-wrap .service-box:hover .service-img:before {
  visibility: visible;
  opacity: 0.4;
}

.service-box-wrap .service-box:hover .service-img img {
  transform: scale(1.03);
}

.service-box-wrap .service-box:hover .icon svg {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.dark .process-section-3 {
  background: #11151c;
}

.process-item-2 {
  padding: 50px 40px;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border: 1px solid #E6E6E6;
  background-color: var(--rr-color-common-white);
}

.dark .process-item-2 {
  background-color: var(--rr-color-bg-1);
  border-color: var(--rr-color-border-1);
}

.process-item-2:before {
  background-color: var(--rr-color-theme-primary);
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 1199px) {
  .process-item-2 {
    padding: 40px 20px;
  }
}

.process-item-2 .icon {
  height: 120px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--rr-color-grey-light);
  border: 1px solid var(--rr-color-grey-light);
}

.process-item-2 .icon svg {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: var(--rr-color-theme-primary);
}

.dark .process-item-2 .icon svg {
  color: var(--rr-color-common-white);
}

.dark .process-item-2 .icon {
  border: 1px solid var(--rr-color-border-1);
  background: transparent;
}

.process-item-2 span {
  color: var(--rr-color-theme-primary);
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  font-family: var(--rr-ff-body);
  line-height: 26px;
  margin-bottom: 10px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.process-item-2 .title {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 1199px) {
  .process-item-2 .title {
    margin-top: 20px;
    font-size: 20px;
  }
}

.process-item-2 p {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #74787C;
  font-size: 16px;
  line-height: 28px;
  font-family: var(--rr-ff-body);
}

.process-item-2 p:last-child {
  margin-bottom: 0;
}

.process-item-2:hover:before {
  width: 100%;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.process-item-2:hover .icon {
  background-color: var(--rr-color-common-white);
  border: 1px solid var(--rr-color-theme-primary);
}

.process-item-2:hover .icon svg {
  color: var(--rr-color-theme-primary);
}

.process-item-2:hover span {
  color: var(--rr-color-common-white);
}

.process-item-2:hover .title {
  color: var(--rr-color-common-white);
}

.process-item-2:hover p {
  color: var(--rr-color-common-white);
}

.running-text {
  background-color: var(--rr-color-theme-primary);
  background-repeat: repeat;
  background-size: 20px;
  padding: 20px 0;
  overflow: hidden;
}

.running-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 60px;
}

.running-text ul li {
  display: inline-block;
  white-space: nowrap;
  font-size: 24px;
  color: var(--rr-color-common-white);
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

.running-text ul li:before {
  font-family: var(--font_awesome);
  content: "\f068";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.running-text.running-1 {
  background-color: var(--rr-color-grey-light);
}

.dark .running-text.running-1 {
  background-color: var(--rr-color-bg-1);
}

.running-text.running-1 ul li {
  color: var(--rr-color-theme-primary);
}

.dark .running-text.running-1 ul li {
  color: var(--rr-color-common-white);
}

.running-text.testi {
  background-color: transparent;
  margin-bottom: 40px;
  padding: 0;
}

.running-text.testi ul {
  gap: 20px;
}

.running-text.testi ul li {
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: var(--rr-color-bg-1);
}

@media only screen and (max-width: 992px) {
  .running-text.testi ul li {
    font-size: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .running-text.testi ul li {
    font-size: 40px;
  }
}

.dark .running-text.testi ul li {
  color: var(--rr-color-common-white);
}

.running-text.testi ul li:before {
  display: none;
}

.running-text.testi ul li:nth-child(2) {
  color: var(--rr-color-theme-primary);
}

.running-text.running-3 {
  position: relative;
  z-index: 1;
  padding: 51px 0;
}

.running-text.running-3 .bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.running-text.running-3 .bg-img:before {
  background-color: var(--rr-color-theme-primary);
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.running-text.running-3 .inner-3 {
  gap: 220px;
}

@media only screen and (max-width: 992px) {
  .running-text.running-3 .inner-3 {
    gap: 180px;
  }
}

@media only screen and (max-width: 992px) {
  .running-text.running-3 .inner-3 {
    gap: 100px;
  }
}

.running-text.running-3 .inner-3 li {
  color: var(--rr-color-common-white);
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
}

@media only screen and (max-width: 992px) {
  .running-text.running-3 .inner-3 li {
    font-size: 70px;
  }
}

@media only screen and (max-width: 767px) {
  .running-text.running-3 .inner-3 li {
    font-size: 40px;
  }
}

.running-text.running-3 .inner-3 li:before {
  font-family: var(--font_awesome);
  font-weight: 500;
  content: "\f005";
  font-size: 80px;
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 992px) {
  .running-text.running-3 .inner-3 li:before {
    font-size: 60px;
    right: -80px;
  }
}

@media only screen and (max-width: 767px) {
  .running-text.running-3 .inner-3 li:before {
    font-size: 30px;
    right: -65px;
  }
}

.running-text.running-3 .inner-3 .stroke-text {
  color: var(--rr-color-common-white);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--rr-color-common-white);
}

.running-text.running-5 ul li {
  font-family: var(--rr-ff-heading);
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.625;
}

.running-text.running-5 ul li i {
  font-size: 22px;
  margin-top: -2px;
}

.running-text.running-5 ul li:before {
  display: none;
}

.heading-space {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 25px;
  margin-bottom: 60px;
}

@media only screen and (max-width: 992px) {
  .heading-space {
    margin-bottom: 40px;
  }
}

.project-top {
  position: relative;
}

.project-top .swiper-pagination {
  color: var(--rr-color-heading-primary);
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  bottom: 0;
  transform: translate(-50%);
  width: auto;
  display: flex;
  align-items: center;
  column-gap: 20px;
}

@media only screen and (max-width: 767px) {
  .project-top .swiper-pagination {
    display: none;
  }
}

.dark .project-top .swiper-pagination {
  color: var(--rr-color-common-white);
}

.project-top .swiper-arrow {
  color: var(--rr-color-heading-primary);
  position: absolute;
  left: auto;
  right: -70px;
  top: 50%;
  bottom: 0;
  transform: translate(-50%);
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .project-top .swiper-arrow {
    display: none;
  }
}

.dark .project-top .swiper-arrow {
  color: var(--rr-color-common-white);
}

.project-top .swiper-arrow .swiper-nav.swiper-next {
  margin-right: 110px;
}

.project-carousel {
  overflow: visible;
}

.project-box {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project-box .shape {
  background-color: var(--rr-color-theme-primary);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 11px;
  left: -10px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project-box .project-thumb {
  height: 600px;
  width: 100%;
}

@media (max-width: 1199px) {
  .project-box .project-thumb {
    height: 500px;
  }
}

@media only screen and (max-width: 767px) {
  .project-box .project-thumb {
    height: 400px;
  }
}

.project-box .project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project-box .project-content {
  position: absolute;
  bottom: 30px;
  left: 50px;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 1199px) {
  .project-box .project-content {
    left: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .project-box .project-content {
    bottom: 10px;
    left: 20px;
  }
}

.project-box .project-content span {
  color: var(--rr-color-common-white);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .project-box .project-content span {
    font-size: 12px;
  }
}

.project-box .project-content .title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .project-box .project-content .title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .project-box .project-content .title {
    font-size: 16px;
  }
}

.project-box .project-content .title a {
  color: var(--rr-color-common-white);
}

.project-box .project-btn {
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-theme-primary);
  height: 120px;
  width: 120px;
  font-size: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 2;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.project-box .project-btn i {
  transform: rotate(-45deg);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.project-box .project-btn:hover i {
  transform: rotate(0);
}

@media only screen and (max-width: 767px) {
  .project-box .project-btn {
    height: 80px;
    width: 80px;
    font-size: 24px;
  }
}

.project-box:hover .project-thumb img {
  filter: grayscale(1);
}

.project-box:hover .project-content {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .project-box:hover .project-content {
    bottom: 20px;
  }
}

.project-box:hover .project-btn {
  transform: translate(-50%, -50%) scale(1);
}

.project-box:hover .shape {
  top: 1px;
  left: 0px;
  visibility: visible;
  opacity: 1;
}

/**----------------------------------------
START: Counter CSS
----------------------------------------*/
.counter-item {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .counter-item {
    justify-content: center;
  }
}

.counter-item .title {
  color: rgba(63, 90, 243, 0.14);
  font-size: 120px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

@media (max-width: 1199px) {
  .counter-item .title {
    font-size: 66px;
  }
}

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

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

.counter-item .title .odometer-auto-theme {
  font-family: inherit;
  line-height: 1;
}

.counter-item .title .odometer-digit-spacer {
  padding-right: 2px;
}

.dark .counter-item .title {
  color: var(--rr-color-theme-primary);
}

.counter-item p {
  font-size: 20px;
  color: #74787C;
  margin-bottom: 0;
  margin-left: -20px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1199px) {
  .counter-item p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-item p {
    font-size: 15px;
    line-height: 1.2;
  }

  .counter-item p br {
    display: block;
  }
}

.dark .counter-item p {
  color: var(--rr-color-common-white);
}

.counter-2 {
  padding: 100px 0;
}

@media only screen and (max-width: 992px) {
  .counter-2 {
    padding: 40px 0;
  }
}

/**----------------------------------------
START: Team CSS
----------------------------------------*/
.team-item {
  overflow: hidden;
}

.team-item .team-thumb {
  position: relative;
  height: 420px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  margin-bottom: 30px;
}

.team-item .team-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item .team-thumb:before {
  background: rgb(63, 90, 243);
  background: linear-gradient(0deg, rgb(63, 90, 243) 0%, rgba(63, 90, 243, 0.0088410364) 70%);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -50px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item .team-thumb:after {
  background: rgb(63, 90, 243);
  background: linear-gradient(0deg, rgb(63, 90, 243) 0%, rgba(63, 90, 243, 0.0088410364) 70%);
  content: "";
  mix-blend-mode: saturation;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -50px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item .team-thumb .team-social-2 {
  list-style: none;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item .team-thumb .team-social-2 li {
  display: inline-flex;
}

.team-item .team-thumb .team-social-2 li:not(:last-of-type) {
  margin-right: 7px;
}

.team-item .team-thumb .team-social-2 li a {
  background-color: var(--rr-color-bg-1);
  color: var(--rr-color-common-white);
  font-size: 14px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-item .team-thumb .team-social-2 li a:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.team-item .team-thumb:hover .team-social-2 {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

.team-item .team-content .title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 10px;
}

.team-item .team-content span {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-item:hover .team-thumb {
  background-color: rgba(63, 90, 243, 0.7);
}

.team-item:hover .team-thumb img {
  mix-blend-mode: multiply;
  filter: grayscale(1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item:hover .team-thumb:after,
.team-item:hover .team-thumb:before {
  visibility: visible;
  opacity: 1;
  bottom: 0;
  transition-delay: 300ms;
}

.team-item:hover .team-thumb .team-social {
  bottom: 0;
  visibility: visible;
  opacity: 1;
}

.team-section-2 {
  background-color: var(--rr-color-grey-light);
}

.dark .team-section-2 {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../imgs/web-development/team-bg.png");
  width: 100%;
  height: 100%;
}

.team-item-2 {
  position: relative;
}

.team-item-2 .team-thumb {
  margin-bottom: 0;
}

.team-item-2 .team-content {
  text-align: center;
  padding: 25px 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  background-color: var(--rr-color-common-white);
  border: none;
  border-top: none;
}

.dark .team-item-2 .team-content {
  border: 1px solid var(--rr-color-border-1);
  background-color: var(--rr-color-bg-1);
}

.team-item-2 .team-content span {
  font-size: 16px;
  color: var(--rr-color-theme-primary);
  font-weight: 400;
  text-transform: capitalize;
}

.team-item-2 .team-social-2 {
  list-style: none;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 135px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-item-2 .team-social-2 li {
  display: inline-flex;
}

.team-item-2 .team-social-2 li:not(:last-of-type) {
  margin-right: 7px;
}

.team-item-2 .team-social-2 li a {
  background-color: var(--rr-color-bg-1);
  color: var(--rr-color-common-white);
  font-size: 14px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-item-2 .team-social-2 li a:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.team-item-2:hover .team-social-2 {
  visibility: visible;
  opacity: 1;
  bottom: 150px;
}

/**----------------------------------------
    START: Pricing CSS
----------------------------------------*/
.pricing-tab .nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-tab .nav-wrap .nav-tabs {
  background-color: var(--rr-color-common-white);
  display: inline-flex;
  align-items: center;
  border-bottom: none;
  border-radius: 100px;
  padding: 10px;
  margin-bottom: 30px;
}

.pricing-tab .nav-wrap .nav-tabs .nav-link {
  color: var(--rr-color-heading-primary);
  font-size: 16px;
  font-weight: 600;
  border-radius: 100px;
  border: none;
  margin: 0 auto;
  margin-bottom: 0;
}

.pricing-tab .nav-wrap .nav-tabs .nav-link.active {
  background-color: rgba(63, 90, 243, 0.1);
  color: var(--rr-color-heading-primary);
  border: none;
  margin-bottom: 0;
}

.pricing-tab .nav-wrap .nav-tabs .nav-link span {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
  font-size: 12px;
  padding: 3px 10px;
  font-weight: 700;
  border-radius: 100px;
}

.tab-pane.active.show .row {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fade-in-bottom;
  animation-name: fade-in-bottom;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: both;
  transition: all 0.8s ease-in-out;
  transition-duration: 2000ms;
  animation-delay: 0.1s;
}

.pricing-item {
  padding: 40px 50px;
  background-color: var(--rr-color-grey-light);
  border: none;
}

.dark .pricing-item {
  background-color: var(--rr-color-bg-1);
  border: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .pricing-item {
    padding: 30px 20px;
  }
}

.pricing-item .plan {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
}

.pricing-item .price {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
  color: var(--rr-color-theme-primary);
}

.pricing-item span {
  font-size: 16px;
  color: var(--rr-color-text-body-light);
  font-weight: 500;
}

.dark .pricing-item span {
  color: var(--rr-color-text-body);
}

.pricing-item .pricing-btn-wrap {
  margin: 30px 0 35px 0;
}

.pricing-item .pricing-btn-wrap .pricing-btn {
  width: 100%;
  justify-content: center;
}

.pricing-item .pricing-btn-wrap .pricing-btn:before {
  background-color: var(--rr-color-common-white);
}

.pricing-item .pricing-btn-wrap .pricing-btn:hover {
  color: var(--rr-color-heading-primary);
}

.pricing-item .pricing-btn-wrap .pricing-btn:not(:last-of-type) {
  margin-bottom: 10px;
}

.pricing-item .pricing-btn-wrap .pricing-btn:nth-child(2) {
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-heading-primary);
}

.pricing-item .pricing-btn-wrap .pricing-btn:nth-child(2):before {
  background-color: var(--rr-color-theme-primary);
}

.pricing-item .pricing-btn-wrap .pricing-btn:nth-child(2):hover {
  color: var(--rr-color-common-white);
}

.pricing-item .feature {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pricing-item p {
  font-size: 16px;
  color: #74787C;
  line-height: 28px;
  font-family: var(--rr-ff-p);
}

.pricing-item p:last-child {
  margin-bottom: 0;
}

.dark .pricing-item p {
  color: var(--secondary);
}

/**----------------------------------------
    START: Appointment CSS
----------------------------------------*/
.appointment-section {
  overflow: hidden;
}

.appointment-wrap {
  position: relative;
  z-index: 1;
  background-color: var(--rr-color-grey-light);
}

.dark .appointment-wrap {
  background-color: var(--rr-color-bg-1);
}

.appointment-wrap:after {
  content: "";
  height: 100%;
  width: 3000px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--rr-color-grey-light);
}

.dark .appointment-wrap:after {
  background-color: var(--rr-color-bg-1);
}

.appointment-wrap>div {
  padding: 0;
}

.appointment-wrap .appointment-img {
  width: 100%;
  height: 100%;
  max-width: 560px;
}

@media only screen and (max-width: 992px) {
  .appointment-wrap .appointment-img {
    height: 600px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .appointment-wrap .appointment-img {
    height: 450px;
  }
}

.appointment-wrap .appointment-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.appointment-wrap .appointment-content {
  padding-left: 70px;
}

@media (max-width: 1399px) {
  .appointment-wrap .appointment-content {
    padding-left: 40px;
    padding-right: 30px;
  }
}

@media (max-width: 1199px) {
  .appointment-wrap .appointment-content {
    padding: 30px 20px 70px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .appointment-wrap .appointment-content {
    padding: 30px 20px 70px 20px;
  }
}

@media (max-width: 1199px) {
  .appointment-wrap .appointment-content .section-heading {
    margin-bottom: 30px;
  }
}

.appointment-wrap .appointment-content .section-heading .section-title {
  line-height: 1.5;
}

@media (max-width: 1199px) {
  .appointment-wrap .appointment-content .section-heading .section-title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .appointment-wrap .appointment-content .section-heading .section-title {
    font-size: 24px;
  }
}

.appointment-wrap .appointment-content .appointment-form .form-control {
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 18px 20px;
  margin-bottom: 25px;
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-text-body-light);
}

.dark .appointment-wrap .appointment-content .appointment-form .form-control {
  background-color: var(--rr-color-border-1);
  color: var(--rr-color-common-white);
}

.appointment-wrap .appointment-content .appointment-form .form-control::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 500;
}

.dark .appointment-wrap .appointment-content .appointment-form .form-control::-webkit-input-placeholder {
  color: var(--rr-color-common-white);
}

.appointment-wrap .appointment-content .appointment-form .form-control:-moz-placeholder {
  font-size: 16px;
  font-weight: 500;
}

.dark .appointment-wrap .appointment-content .appointment-form .form-control:-moz-placeholder {
  color: var(--rr-color-common-white);
}

.appointment-wrap .appointment-content .appointment-form .form-control::-moz-placeholder {
  font-size: 16px;
  font-weight: 500;
}

.dark .appointment-wrap .appointment-content .appointment-form .form-control::-moz-placeholder {
  color: var(--rr-color-common-white);
}

.appointment-wrap .appointment-content .appointment-form .form-control:-ms-input-placeholder {
  font-size: 16px;
  font-weight: 500;
}

.dark .appointment-wrap .appointment-content .appointment-form .form-control:-ms-input-placeholder {
  color: var(--rr-color-common-white);
}

/* !END: Appointment CSS */
/**----------------------------------------
START: Testi CSS
----------------------------------------*/
.testi-item {
  padding: 100px 40px 40px 40px;
  background-color: var(--rr-color-grey-light);
  position: relative;
}

.dark .testi-item {
  background-color: var(--rr-color-bg-1);
}

@media (max-width: 1199px) {
  .testi-item {
    margin-bottom: 100px;
  }
}

.testi-item .testi-thumb {
  height: 160px;
  width: 160px;
  border-radius: 50%;
  margin: 0 auto;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 10px solid var(--rr-color-common-white);
}

.dark .testi-item .testi-thumb {
  border: 10px solid #02050a;
}

.testi-item .testi-thumb img {
  object-fit: cover;
}

.testi-item .testi-content p {
  color: #74787C;
  font-size: 16px;
  line-height: 28px;
  font-family: var(--rr-ff-body);
}

.dark .testi-item .testi-content p {
  color: var(--secondary);
}

.testi-item .testi-content .author {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.testi-item .testi-content .author span {
  color: var(--rr-color-theme-primary);
  font-size: 12px;
  text-transform: uppercase;
  display: block;
  margin-top: 15px;
}

.testi-wrap {
  padding-top: 90px;
}

/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.post-card-wrap:not(:last-of-type) {
  margin-bottom: 30px;
}

.post-card {
  display: grid;
  align-items: center;
  grid-template-columns: 570px 1fr;
  grid-gap: 40px;
  padding: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--rr-color-grey-light);
  border: 1px solid var(--rr-color-grey-light);
}

@media (max-width: 1199px) {
  .post-card {
    grid-template-columns: 470px 1fr;
  }
}

@media only screen and (max-width: 992px) {
  .post-card {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .post-card {
    padding: 30px 20px;
  }
}

.dark .post-card {
  background-color: var(--rr-color-bg-1);
  border: 1px solid var(--rr-color-border-1);
}

.post-card .post-thumb {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.post-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
  transform: scale(1);
}

.post-card .post-content .title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 30px;
  text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
  .post-card .post-content .title {
    font-size: 18px;
  }
}

.post-card .post-content .title a {
  background: linear-gradient(var(--rr-color-theme-primary) 0%, var(--rr-color-theme-primary) 98%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.dark .post-card .post-content .title a {
  color: var(--rr-color-common-white);
}

.post-card .post-content .title a:hover {
  color: var(--rr-color-theme-primary);
  background-size: 100% 2px;
}

.dark .post-card .post-content .title a:hover {
  color: var(--rr-color-common-white);
}

.post-card .post-content .rr-primary-btn {
  background-color: transparent;
  padding: 14.5px 30px;
  border: 1px solid #1E2228;
  color: var(--rr-color-heading-primary);
}

.dark .post-card .post-content .rr-primary-btn {
  border: 1px solid var(--rr-color-border-1);
  color: var(--rr-color-common-white);
}

.post-card .post-content .rr-primary-btn:before {
  background-color: var(--rr-color-theme-primary);
}

.post-card .post-content .rr-primary-btn:hover {
  color: var(--rr-color-common-white);
  border: 1px solid var(--rr-color-theme-primary);
}

.dark .post-card:hover {
  border: 1px solid var(--rr-color-theme-primary);
}

.post-card:hover .post-thumb img {
  transform: scale(1.02);
}

.post-meta {
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 10px;
  margin-bottom: 20px;
}

.post-meta li {
  font-family: var(--rr-ff-body);
  color: #B0B2B7;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.post-meta li i {
  font-size: 14px;
}

.post-meta li:not(:last-of-type) {
  margin-right: 20px;
}

.post-meta li a:hover {
  color: var(--rr-color-theme-primary);
}

@media only screen and (max-width: 767px) {
  .post-meta li {
    font-size: 12px;
  }
}

.post-content-wrap .post-meta {
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 10px;
  margin-bottom: 20px;
}

.post-content-wrap .post-meta li {
  font-family: var(--rr-ff-p);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  column-gap: 10px;
  color: var(--rr-color-text-body-light);
}

.dark .post-content-wrap .post-meta li {
  color: #B0B2B7;
}

.post-content-wrap .post-meta li i {
  font-size: 14px;
}

.post-content-wrap .post-meta li:not(:last-of-type) {
  margin-right: 20px;
}

.post-content-wrap .post-meta li a:hover {
  color: var(--rr-color-theme-primary);
}

@media only screen and (max-width: 767px) {
  .post-content-wrap .post-meta li {
    font-size: 12px;
  }
}

.post-content .title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 30px;
  text-transform: capitalize;
}

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

.post-content .title a {
  background: linear-gradient(var(--rr-color-theme-primary) 0%, var(--rr-color-theme-primary) 98%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.post-content .title a:hover {
  color: var(--rr-color-common-white);
  background-size: 100% 2px;
}

.post-content .blog-btn {
  background-color: transparent;
  border: 1px solid var(--rr-color-border-1);
  padding: 14.5px 30px;
}

.post-content .blog-btn:before {
  background-color: var(--rr-color-theme-primary);
}

.post-card-2 {
  position: relative;
  z-index: 1;
}

.post-card-2 .post-thumb {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 992px) {
  .post-card-2 .post-thumb {
    height: 420px;
    width: 100%;
  }

  .post-card-2 .post-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1);
  }
}

.post-card-2 .post-thumb img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.post-card-2 .post-thumb:before {
  background: linear-gradient(180deg, rgba(2, 5, 10, 0) 0%, rgba(29, 37, 81, 0.95) 51.08%);
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.post-card-2 .post-thumb:after {
  background: linear-gradient(180deg, rgba(14, 32, 147, 0.7) 0%, #3F5AF3 88.88%);
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.post-card-2 .post-content-wrap {
  position: absolute;
  bottom: 60px;
  left: 60px;
  z-index: 2;
  padding-right: 50px;
}

@media only screen and (max-width: 992px) {
  .post-card-2 .post-content-wrap {
    left: 30px;
    bottom: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .post-card-2 .post-content-wrap {
    left: 20px;
    bottom: 20px;
    padding-right: 20px;
  }
}

.post-card-2 .post-content-wrap .post-content .post-meta li {
  color: var(--rr-color-common-white);
}

.post-card-2 .post-content-wrap .post-content .title {
  font-weight: 700;
}

.post-card-2 .post-content-wrap .post-content .title a {
  background: linear-gradient(var(--rr-color-common-white) 0%, var(--rr-color-common-white) 98%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.post-card-2 .post-content-wrap .post-content .title a:hover {
  color: var(--rr-color-common-white);
  background-size: 100% 2px;
}

.post-card-2 .post-content-wrap .post-content .rr-primary-btn {
  padding: 14.5px 30px;
}

.post-card-2:hover .post-thumb:before {
  visibility: hidden;
  opacity: 0;
}

.post-card-2:hover .post-thumb:after {
  visibility: visible;
  opacity: 1;
}

.post-card-2.card-3 .post-content-wrap {
  position: inherit;
  top: 0;
  left: 0;
  padding: 0;
}

.post-card-2.card-3 .post-content-wrap .post-content .post-meta li {
  color: var(--rr-color-text-body-light);
}

.dark .post-card-2.card-3 .post-content-wrap .post-content .post-meta li {
  color: var(--rr-color-text-body);
}

.post-card-2.card-3 .post-content-wrap .post-content .title a {
  color: var(--rr-color-heading-primary);
  background: linear-gradient(var(--rr-color-theme-primary) 0%, var(--rr-color-theme-primary) 98%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.dark .post-card-2.card-3 .post-content-wrap .post-content .title a {
  color: var(--rr-color-common-white);
}

.post-card-2.card-3 .post-content-wrap .post-content .title a:hover {
  color: var(--rr-color-theme-primary);
  background-size: 100% 2px;
}

.post-card-2.card-3 .post-thumb {
  height: 350px;
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
}

.post-card-2.card-3 .post-thumb:after,
.post-card-2.card-3 .post-thumb:before {
  display: none;
}

.post-card-2.card-3 .post-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.post-card-2.card-3:hover .post-thumb img {
  transform: scale(1.02);
}

.post-card-2.card-4 .post-thumb {
  height: 320px;
}

.post-card-2.card-4 .post-content-wrap .post-content .post-meta {
  column-gap: 0px;
}

.post-card-2.card-4 .post-content-wrap .post-content .post-meta li {
  font-size: 16px;
  position: relative;
  text-transform: capitalize;
  line-height: 1.625;
}

.post-card-2.card-4 .post-content-wrap .post-content .post-meta li:nth-child(1) {
  color: var(--rr-color-theme-primary);
}

.post-card-2.card-4 .post-content-wrap .post-content .post-meta li:not(:last-of-type) {
  margin-right: 10px;
  padding-right: 15px;
}

.post-card-2.card-4 .post-content-wrap .post-content .post-meta li:not(:last-of-type):before {
  color: var(--rr-color-text-body);
  content: "/";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.post-card-2.card-4 .post-content-wrap .post-content .title {
  margin-bottom: 30px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .post-card-2.post-card-3 {
    height: 100%;
  }

  .post-card-2.post-card-3 .post-thumb {
    height: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .post-card-2.post-card-3 {
    height: 350px;
  }
}

.blog-section-3 {
  position: relative;
  z-index: 1;
}

.blog-section-3 .shapes .shape {
  position: absolute;
}

.blog-section-3 .shapes .shape.shape-1 {
  top: 3%;
  left: 6%;
  opacity: 0.1;
}

.dark .blog-section-3 .shapes .shape.shape-1 {
  opacity: 1;
}

.blog-section-3 .shapes .shape.shape-2 {
  bottom: 20%;
  right: 0px;
  opacity: 0.1;
}

.dark .blog-section-3 .shapes .shape.shape-2 {
  opacity: 1;
}

/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.footer-section {
  position: relative;
  z-index: 1;
}

.footer-section .shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.footer-wrap {
  padding: 130px 0;
}

@media only screen and (max-width: 992px) {
  .footer-wrap {
    padding: 80px 0 0 0;
  }
}

@media only screen and (max-width: 992px) {
  .footer-widget {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-widget {
    margin-bottom: 50px;
  }
}

.footer-widget .widget-header {
  margin-bottom: 45px;
}

.footer-widget .widget-header .footer-logo {
  max-width: 170px;
}

.footer-widget .widget-header .widget-title {
  color: var(--rr-color-common-white);
  font-size: 24px;
  font-weight: 700;
  position: relative;
}

.footer-widget .widget-header .widget-title:before {
  background-color: var(--rr-color-theme-primary);
  content: "";
  height: 5px;
  width: 80px;
  position: absolute;
  bottom: -8px;
  left: 0;
}

.footer-widget P {
  color: var(--rr-color-text-body);
  font-size: 16px;
  line-height: 28px;
}

.footer-widget .title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 30px;
  text-transform: uppercase;
  color: var(--rr-color-border-light);
}

.footer-widget .title span {
  color: var(--rr-color-text-body);
  display: block;
  margin-top: 10px;
  text-transform: inherit;
  font-weight: 400;
}

.footer-widget .footer-list {
  list-style: none;
}

.footer-widget .footer-list li {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--rr-ff-body);
  font-size: 16px;
  line-height: 1.625;
  font-weight: normal;
}

.footer-widget .footer-list li a {
  font-family: var(--rr-ff-body);
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.footer-widget .footer-list li a:hover {
  color: var(--rr-color-theme-primary);
}

.footer-widget .footer-list li:not(:last-of-type) {
  margin-bottom: 20px;
}

.footer-widget .footer-form {
  position: relative;
  margin-top: 30px;
}

.footer-widget .footer-form .form-control {
  background-color: var(--rr-color-border-1);
  padding: 15px 104px 15px 15px;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  border: none;
  border-radius: 4px;
}

.footer-widget .footer-form .form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.footer-widget .footer-form .form-control:-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.footer-widget .footer-form .form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.footer-widget .footer-form .form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.footer-widget .footer-form .submit {
  background-color: var(--rr-color-theme-primary);
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px;
  border-radius: 4px;
}

.footer-widget .address-list {
  list-style: none;
  margin-bottom: 30px;
}

.footer-widget .address-list li {
  font-family: var(--rr-ff-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  column-gap: 10px;
  line-height: 1.625;
  font-weight: normal;
}

.footer-widget .address-list li:not(:last-of-type) {
  margin-bottom: 15px;
}

.footer-widget .address-list li i {
  color: var(--rr-color-theme-primary);
  line-height: 1;
  margin-top: 6px;
}

.footer-widget .address-list li a {
  border-bottom: 1px solid transparent;
}

.footer-widget .address-list li a:hover {
  color: var(--rr-color-theme-primary);
  border-bottom: 1px solid var(--rr-color-theme-primary);
}

.footer-widget .social-list {
  display: flex;
  align-items: center;
  list-style: none;
}

.footer-widget .social-list li a {
  background-color: transparent;
  color: var(--rr-color-common-white);
  font-size: 14px;
  height: 40px;
  width: 40px;
  border-radius: 0;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-widget .social-list li a:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.footer-widget .social-list li:not(:last-of-type) {
  margin-right: 10px;
}

.footer-widget .form-check {
  margin-top: 30px;
}

.footer-widget .form-check .form-check-input {
  background-color: var(--rr-color-border-1);
  border: none;
  box-shadow: none;
  height: 17px;
  width: 17px;
}

.footer-widget .form-check .form-check-input:checked[type=checkbox] {
  box-shadow: none;
}

.footer-widget .form-check .form-check-label {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: var(--rr-color-text-body);
  line-height: 1.625;
}

.footer-widget.footer-col-2 {
  padding-left: 70px;
}

@media only screen and (max-width: 992px) {
  .footer-widget.footer-col-2 {
    padding-left: 0;
  }
}

.footer-widget.footer-col-2 .footer-list li a {
  position: relative;
  padding-left: 30px;
}

.footer-widget.footer-col-2 .footer-list li a:before {
  background-image: none;
  font-family: var(--font_awesome);
  font-size: 14px;
  font-weight: 700;
  content: "\f061";
  color: var(--rr-color-text-body);
  position: absolute;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.footer-widget.footer-col-2 .footer-list li a:hover:before {
  color: var(--rr-color-theme-primary);
  left: 5px;
}

.footer-widget.widget-3 {
  padding-left: 30px;
}

@media only screen and (max-width: 992px) {
  .footer-widget.widget-3 {
    padding-left: 0;
  }
}

.copyright-area.has--border {
  border-top: 1px solid var(--rr-color-border-1);
  padding: 40px 0;
}

@media only screen and (max-width: 992px) {
  .copyright-area.has--border {
    padding: 40px 0;
  }
}

@media only screen and (max-width: 767px) {
  .copyright-content.content-2 .site-logo {
    margin: 0 auto;
  }
}

.copyright-content.content-2 p {
  text-align: right;
  margin-bottom: 0;
  color: var(--rr-color-common-white);
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .copyright-content.content-2 p {
    text-align: center;
  }
}

.footer-3 .footer-top {
  padding-bottom: 90px;
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .footer-3 .footer-top {
    padding: 50px 0;
  }
}

.footer-3 .footer-top .title {
  font-size: 80px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 992px) {
  .footer-3 .footer-top .title {
    font-size: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .footer-3 .footer-top .title {
    font-size: 30px;
  }
}

.footer-3 .footer-top .footer-btn {
  color: var(--rr-color-common-white);
  font-size: 30px;
  height: 130px;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--rr-color-theme-primary);
}

.footer-3 .footer-top .footer-btn i {
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.footer-3 .footer-top .footer-btn:hover i {
  transform: rotate(0deg);
}

.footer-3 .footer-wrap {
  border-bottom: 1px solid var(--rr-color-border-1);
  padding: 30px 0;
}

.footer-3 .footer-wrap .footer-text-social {
  display: flex;
  align-items: center;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 15px;
}

@media only screen and (max-width: 767px) {
  .footer-3 .footer-wrap .footer-text-social {
    justify-content: start;
  }
}

.footer-3 .footer-wrap .footer-text-social li {
  line-height: 1;
}

.footer-3 .footer-wrap .footer-text-social li:not(:last-of-type) {
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .footer-3 .footer-wrap .footer-text-social li:not(:last-of-type) {
    margin-right: 20px;
  }
}

.footer-3 .footer-wrap .footer-text-social li a {
  color: var(--rr-color-common-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.footer-3 .footer-wrap .footer-text-social li a:hover {
  color: var(--rr-color-theme-primary);
}

.footer-3 .copyright-area {
  border-top: none;
}

.footer-3 .copyright-area .site-logo {
  max-width: 170px;
}

/* web design page css */
.web-design.dark {
  background-color: #02050A;
}

.hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-section .hero-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
}

.dark .hero-section .hero-bg-shape {
  opacity: 1;
}

.hero-section .hero-shape {
  position: absolute;
  bottom: 23%;
  left: 0;
}

.hero-section .hero-img {
  position: absolute;
  bottom: -22.5px;
  right: 0;
}

@media (max-width: 1399px) {
  .hero-section .hero-img {
    right: -20%;
  }
}

@media only screen and (max-width: 992px) {
  .hero-section .hero-img {
    max-width: 610px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section .hero-img {
    display: none;
  }
}

.hero-section .hero-images {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 510px;
}

@media (max-width: 1700px) {
  .hero-section .hero-images {
    left: -75px;
  }
}

@media (max-width: 1199px) {
  .hero-section .hero-images {
    display: none;
  }
}

.hero-section .hero-images img {
  margin-right: auto;
  height: 250px;
  width: 250px;
  object-fit: cover;
}

.hero-section .hero-images img:nth-child(2) {
  margin: -30px 0 12px auto;
}

@media (max-width: 1399px) {
  .hero-section .hero-images img:nth-child(2) {
    margin-right: 40px;
  }
}

.hero-section .hero-images img:nth-child(3) {
  margin-left: 50px;
}

@media (max-width: 1399px) {
  .hero-section .hero-images img:nth-child(3) {
    margin-left: 0;
  }
}

.web-hero-content {
  padding: 300px 0 150px 0;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding-left: 55px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1199px) {
  .web-hero-content {
    padding-left: 0;
  }
}

@media only screen and (max-width: 992px) {
  .web-hero-content {
    padding: 100px 0 100px 40px;
  }
}

@media only screen and (max-width: 767px) {
  .web-hero-content {
    padding-left: 0;
  }
}

.web-hero-content .sub-title {
  font-size: 50px;
  font-weight: 700;
}

@media only screen and (max-width: 992px) {
  .web-hero-content .sub-title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .web-hero-content .sub-title {
    font-size: 24px;
  }
}

.web-hero-content .title {
  font-size: 135px;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  color: var(--rr-color-theme-primary);
}

@media only screen and (max-width: 992px) {
  .web-hero-content .title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .web-hero-content .title {
    font-size: 50px;
  }
}

.dark .web-hero-content .title {
  color: var(--rr-color-common-white);
}

.dark .web-hero-content .title:before {
  background: linear-gradient(270deg, #3F5AF3 0%, transparent 100%);
  content: "";
  width: 100%;
  height: 76%;
  position: absolute;
  top: 15%;
  right: 0;
  z-index: -1;
  opacity: 0.95;
}

.web-hero-content .bottom-title {
  font-size: 75px;
  font-weight: 700;
  margin-bottom: 40px;
}

@media only screen and (max-width: 992px) {
  .web-hero-content .bottom-title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .web-hero-content .bottom-title {
    font-size: 30px;
  }
}

.web-hero-content .hero-btn {
  background-image: url(../imgs/web-design/hero-btn-bg.webp);
  color: var(--rr-color-common-white);
  font-size: 60px;
  height: 180px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .web-hero-content .hero-btn {
    height: 120px;
    width: 120px;
    font-size: 40px;
  }
}

.web-hero-content .hero-btn i {
  transform: rotate(-45deg) scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.web-hero-content .hero-btn:before {
  background-color: #3F5AF3;
  mix-blend-mode: multiply;
  content: "";
  width: 170px;
  height: 170px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.9;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
  .web-hero-content .hero-btn:before {
    height: 110px;
    width: 110px;
  }
}

.web-hero-content .hero-btn:hover:before {
  width: 100%;
  height: 100%;
}

.web-hero-content .hero-btn:hover i {
  transform: rotate(-45deg) scale(1.05);
}

/**----------------------------------------
START: Process CSS
----------------------------------------*/
.process-section {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .process-section {
    padding-top: 0;
  }
}

.process-section .bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  opacity: 0.01;
}

.dark .process-section .bg-shape {
  opacity: 1;
}

@media only screen and (max-width: 992px) {
  .process-item {
    text-align: center;
  }
}

.dark .process-item .light-img {
  display: none;
}

.process-item .dark-img {
  display: none;
}

.dark .process-item .dark-img {
  display: block;
}

.process-item .process-icon {
  height: 160px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 35px;
  position: relative;
  background-color: #F2F3F4;
}

@media only screen and (max-width: 992px) {
  .process-item .process-icon {
    margin: 0 auto;
    margin-bottom: 30px;
  }
}

.dark .process-item .process-icon {
  background-color: var(--rr-color-bg-1);
}

.process-item .process-icon:before {
  background-color: transparent;
  content: "";
  height: 140px;
  width: 140px;
  position: absolute;
  top: 0;
  left: -20px;
  border: 1px solid var(--rr-color-theme-primary);
  border-radius: 50%;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 1399px) {
  .process-item .process-icon:before {
    left: -10px;
  }
}

.process-item .process-icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.process-item .process-icon.icon-2 {
  background-color: var(--rr-color-common-white);
}

.dark .process-item .process-icon.icon-2 {
  background-color: #02050A;
}

.process-item .process-content .title {
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--rr-color-heading-primary);
  font-size: 24px;
  line-height: 28px;
}

.dark .process-item .process-content .title {
  color: var(--rr-color-common-white);
}

@media (max-width: 1199px) {
  .process-item .process-content .title {
    font-size: 20px;
  }
}

.process-item .process-content p {
  font-size: 16px;
  line-height: 28px;
  color: #74787C;
}

.dark .process-item .process-content p {
  color: var(--rr-color-text-body);
}

@media (max-width: 1199px) {
  .process-item .process-content p br {
    display: none;
  }
}

.process-item .process-content p:last-child {
  margin-bottom: 0;
}

.process-item:hover .process-icon:before {
  top: 5px;
  left: 10px;
}

.process-item:hover .process-icon img {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.process-text {
  max-width: 1720px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media only screen and (max-width: 992px) {
  .process-text {
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 767px) {
  .process-text {
    padding-top: 40px;
  }
}

.dark .process-text .light-img {
  display: none;
}

.process-text .dark-img {
  display: none;
}

.dark .process-text .dark-img {
  display: block;
}

/**----------------------------------------
START: About CSS
----------------------------------------*/
.about-section {
  padding-top: 120px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1199px) {
  .about-section {
    padding-top: 70px;
  }
}

.about-section .round-shape {
  position: absolute;
  bottom: -10%;
  right: 0;
  z-index: -1;
  opacity: 0.05;
}

@media only screen and (max-width: 767px) {
  .about-section .round-shape {
    display: none;
  }
}

.dark .about-section .round-shape {
  opacity: 1;
}

.about-wrap {
  background-color: var(--rr-color-grey-light);
  max-width: 1710px;
  width: 100%;
  padding: 0 115px 0 150px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

@media (max-width: 1199px) {
  .about-wrap {
    padding: 0 80px 0 80px;
  }
}

@media only screen and (max-width: 992px) {
  .about-wrap {
    padding: 0 20px;
  }
}

.dark .about-wrap {
  background-color: var(--rr-color-bg-1);
}

.about-wrap .shape {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  opacity: 0.05;
}

.dark .about-wrap .shape {
  opacity: 1;
}

.about-wrap .about-content {
  padding: 120px 0;
}

@media (max-width: 1199px) {
  .about-wrap .about-content {
    padding: 60px 0;
  }
}

.about-wrap .about-content .section-heading .section-title {
  margin-bottom: 30px;
}

.about-wrap .about-content p {
  max-width: 740px;
  width: 100%;
  color: #74787C;
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 28px;
}

@media (max-width: 1199px) {
  .about-wrap .about-content p {
    max-width: 450px;
  }
}

.about-wrap .about-img-wrap {
  text-align: right;
  position: relative;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
}

@media only screen and (max-width: 992px) {
  .about-wrap .about-img-wrap {
    margin-left: 0;
    margin: 0 auto;
  }
}

.about-wrap .about-img-wrap .about-img {
  transform: translateY(-120px);
  position: relative;
  max-width: 507px;
  width: 100%;
  margin-left: auto;
}

@media only screen and (max-width: 992px) {
  .about-wrap .about-img-wrap .about-img {
    margin: 0 auto;
    transform: translateY(0px);
  }
}

.about-wrap .about-img-wrap .about-img .img-shape {
  background-color: #3F5AF3;
  mix-blend-mode: multiply;
  content: "";
  width: 90px;
  height: 160px;
  position: absolute;
  top: 55%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0.9;
  z-index: 1;
}

.about-wrap .about-img-wrap .about-img .img-shape img {
  transform-origin: inherit;
}

.about-wrap .about-img-wrap .about-img-2 {
  max-width: 325px;
  width: 100%;
  height: 280px;
  position: absolute;
  bottom: 0;
  left: -30px;
}

.about-wrap .about-img-wrap .about-img-2 img {
  width: 100%;
  height: 100%;
  border-right: 10px solid var(--rr-color-grey-light);
  border-top: 10px solid var(--rr-color-grey-light);
}

.dark .about-wrap .about-img-wrap .about-img-2 img {
  border-right: 10px solid #0B0F15;
  border-top: 10px solid #0B0F15;
}

.about-wrap .about-text {
  max-width: 660px;
  width: 100%;
  position: absolute;
  left: 18%;
  bottom: 20px;
  z-index: -1;
}

.dark .about-wrap .about-text .light-img {
  display: none;
}

.about-wrap .about-text .dark-img {
  display: none;
}

.dark .about-wrap .about-text .dark-img {
  display: block;
}

/**----------------------------------------
START: Service CSS
----------------------------------------*/
.service-section {
  position: relative;
  z-index: 1;
}

.service-section .bg-color {
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: var(--rr-color-grey-light);
}

@media only screen and (max-width: 992px) {
  .service-section .bg-color {
    height: 60%;
  }
}

.dark .service-section .bg-color {
  background-color: var(--rr-color-bg-1);
}

.service-section .shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.05;
}

.dark .service-section .shape {
  opacity: 1;
}

.service-item .service-text {
  text-align: center;
}

.service-item .service-text a {
  font-size: 30px;
  font-weight: 700;
  color: var(--rr-color-grey-2);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

@media (max-width: 1399px) {
  .service-item .service-text a {
    font-size: 25px;
  }
}

@media (max-width: 1199px) {
  .service-item .service-text a {
    font-size: 20px;
  }
}

.service-item .service-thumb {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.service-item .service-thumb img {
  height: 360px;
  width: 100%;
  object-fit: cover;
  z-index: -1;
  position: relative;
}

.service-item .service-thumb .overlay-color {
  background: #001695;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}

.service-item .service-thumb .transparent-shape {
  width: 255px;
  height: 255px;
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}

.service-item .service-thumb .service-icon {
  background-color: var(--rr-color-common-white);
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 30px;
  left: 15px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
}

.service-item .service-thumb .service-icon svg {
  color: var(--rr-color-theme-primary);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.service-item .service-thumb .service-icon:hover {
  background-color: var(--rr-color-theme-primary);
}

.service-item .service-thumb .service-icon:hover svg {
  color: var(--rr-color-common-white);
}

.service-item .service-thumb .service-btn {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  font-size: 16px;
  font-weight: 600;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  padding: 14.5px 0;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
}

.service-item .service-thumb .service-btn i {
  transform: rotate(-45deg);
}

.service-item:hover .service-text a {
  color: var(--rr-color-theme-primary);
}

.dark .service-item:hover .service-text a {
  color: var(--rr-color-common-white);
}

.service-item:hover .transparent-shape {
  visibility: visible;
  opacity: 1;
}

.service-item:hover .service-thumb .service-icon {
  left: 30px;
  visibility: visible;
  opacity: 1;
}

.service-item:hover .service-thumb .service-btn {
  visibility: visible;
  opacity: 1;
  bottom: 30px;
}

/**----------------------------------------
START: Faq CSS
----------------------------------------*/
.faq-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.faq-section .faq-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: 0.05;
}

.faq-section .faq-top-shape {
  background-color: #1F252F;
  width: 240px;
  height: 240px;
  position: absolute;
  top: -185px;
  right: 145px;
  border-radius: 50%;
}

@media only screen and (max-width: 992px) {
  .faq-section .faq-top-shape {
    right: 0px;
  }
}

.faq-section .faq-top-shape:before {
  background-color: transparent;
  content: "";
  width: 260px;
  height: 260px;
  position: absolute;
  top: 10px;
  left: -30px;
  border-radius: 50%;
  border: 1px solid var(--rr-color-theme-primary);
}

@media only screen and (max-width: 767px) {
  .faq-section .faq-top-shape:before {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .faq-content .section-heading .sub-heading {
    font-size: 13px;
  }
}

.faq-content .section-heading .section-title {
  font-size: 45px;
}

@media (max-width: 1199px) {
  .faq-content .section-heading .section-title {
    margin-left: 0;
  }
}

@media only screen and (max-width: 992px) {
  .faq-content .section-heading .section-title {
    margin-left: 0;
    max-width: 600px;
    width: 100%;
    font-size: 32px;
  }
}

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

.faq-content .accordion .accordion-item {
  background-color: transparent;
  border: none;
  padding-bottom: 30px;
  padding-top: 30px;
  border-radius: 0;
  border-bottom: 1px solid var(--rr-color-border-light);
}

.dark .faq-content .accordion .accordion-item {
  border-bottom: 1px solid var(--rr-color-border-1);
}

.faq-content .accordion .accordion-item:first-child {
  padding-top: 30px;
  border-top: 1px solid var(--rr-color-border-light);
}

.faq-content .accordion .accordion-item .accordion-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  color: var(--rr-color-heading-primary);
}

.dark .faq-content .accordion .accordion-item .accordion-button {
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 767px) {
  .faq-content .accordion .accordion-item .accordion-button {
    font-size: 18px;
    line-height: 1.5;
    padding: 10px 0 !important;
  }
}

.faq-content .accordion .accordion-item .accordion-button:after {
  background-image: none;
  font-family: var(--font_awesome);
  font-size: 14px;
  font-weight: 700;
  content: "+";
  color: var(--rr-color-heading-primary);
  height: 45px;
  width: 45px;
  border: 1px solid var(--rr-color-border-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.dark .faq-content .accordion .accordion-item .accordion-button:after {
  color: var(--rr-color-common-white);
}

.faq-content .accordion .accordion-item .accordion-button:not(.collapsed):after {
  background: var(--rr-color-theme-primary);
  content: "\f068";
  transform: rotate(0);
  border: 1px solid var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.faq-content .accordion .accordion-item .accordion-body {
  font-size: 16px;
  padding: 0;
  padding-top: 25px;
  color: #74787C;
}

.dark .faq-content .accordion .accordion-item .accordion-body {
  color: var(--rr-color-text-body);
}

.faq-img {
  padding-left: 25px;
  max-width: 665px;
  width: 100%;
  height: 555px;
}

.faq-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1199px) {
  .faq-img {
    margin: 0 auto;
    margin-top: 40px;
  }
}

@media only screen and (max-width: 992px) {
  .faq-img {
    padding-left: 0;
    height: auto;
  }
}

/**----------------------------------------
START: Testi CSS
----------------------------------------*/
.testi-carousel {
  overflow: visible;
  padding-top: 90px;
  padding-bottom: 80px;
}

.testi-carousel .swiper-pagination {
  bottom: 0;
}

.testi-carousel .swiper-pagination .swiper-pagination-bullet {
  height: 15px;
  width: 15px;
  border: 1px solid var(--rr-color-border-1);
  opacity: 1;
  background-color: transparent;
}

.testi-carousel .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--rr-color-theme-primary);
  border: 1px solid var(--rr-color-theme-primary);
}

.testi-item {
  padding: 100px 40px 40px 40px;
  position: relative;
  background-color: var(--rr-color-grey-light);
}

.dark .testi-item {
  background-color: var(--rr-color-bg-1);
}

.testi-item .testi-thumb {
  height: 160px;
  width: 160px;
  border-radius: 50%;
  margin: 0 auto;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid var(--rr-color-common-white);
  border-radius: 50%;
}

.dark .testi-item .testi-thumb {
  border: 10px solid #02050a;
}

.testi-item .testi-thumb img {
  object-fit: cover;
}

.testi-item .testi-content .author {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.testi-item .testi-content .author span {
  font-size: 12px;
  display: block;
  margin-top: 15px;
  text-transform: uppercase;
  color: var(--rr-color-theme-primary);
}

/**----------------------------------------
START: Project CSS
----------------------------------------*/
.project-item {
  background-color: transparent;
  border-bottom: 1px solid var(--rr-color-border-1);
}

.project-item .project-content {
  display: grid;
  grid-template-columns: 65px 1fr;
  align-items: start;
  grid-gap: 15px;
}

@media only screen and (max-width: 767px) {
  .project-item .project-content {
    grid-template-columns: 1fr;
  }
}

.project-item .project-content .number {
  font-size: 20px;
  font-weight: 700;
  height: 65px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--rr-color-grey-light);
  color: var(--rr-color-heading-primary);
  border: 1px solid var(--rr-color-border-light);
}

.dark .project-item .project-content .number {
  background-color: #11151c;
  color: var(--rr-color-common-white);
  border: 1px solid var(--rr-color-border-1);
}

.project-item .project-content .project-right {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project-item .project-content .project-right .category {
  font-size: 14px;
  color: var(--rr-color-theme-primary);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
}

.project-item .project-content .project-right .title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 0px;
  color: var(--rr-color-heading-primary);
}

.dark .project-item .project-content .project-right .title {
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 767px) {
  .project-item .project-content .project-right .title {
    font-size: 24px;
  }
}

.project-item .project-content .project-right .hover-content p {
  margin-bottom: 25px;
  width: 100%;
}

.project-accordion .accordion-item {
  position: relative;
  border: none;
  border-radius: 0;
  padding-bottom: 40px;
  padding-top: 40px;
  border-bottom: 1px solid var(--rr-color-border-light);
}

.dark .project-accordion .accordion-item {
  border-bottom: 1px solid var(--rr-color-border-1);
}

.project-accordion .accordion-item:first-of-type {
  border-top: 1px solid var(--rr-color-border-light);
}

.dark .project-accordion .accordion-item:first-of-type {
  border-top: 1px solid var(--rr-color-border-1);
}

.project-accordion .accordion-item .accordion-header {
  background-color: transparent;
}

.project-accordion .accordion-item .accordion-header .accordion-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.project-accordion .accordion-item .accordion-header .accordion-button:after {
  display: none;
}

.project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .project-content .number {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.dark .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .project-content .number {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.project-accordion .accordion-item .accordion-body {
  padding: 0;
  padding-top: 35px;
  padding-left: 80px;
  padding-bottom: 55px;
}

@media only screen and (max-width: 992px) {
  .project-accordion .accordion-item .accordion-body {
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 992px) {
  .project-accordion .accordion-item .accordion-body {
    padding-left: 0;
  }
}

.project-accordion .accordion-item .accordion-body .hover-content {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 20px;
}

.project-accordion .accordion-item .accordion-body .hover-content .content-left p {
  max-width: 560px;
  width: 100%;
  margin-bottom: 30px;
  color: #74787C;
  font-size: 16px;
  line-height: 28px;
}

@media (max-width: 1199px) {
  .project-accordion .accordion-item .accordion-body .hover-content .content-left p {
    max-width: 500px;
  }
}

.project-accordion .accordion-item .accordion-body .hover-content .content-right .project-thumb {
  max-width: 600px;
  width: 100%;
  height: 300px;
  position: absolute;
  top: 40px;
  right: 0;
  opacity: 0;
}

@media (max-width: 1199px) {
  .project-accordion .accordion-item .accordion-body .hover-content .content-right .project-thumb {
    max-width: 370px;
  }
}

@media only screen and (max-width: 992px) {
  .project-accordion .accordion-item .accordion-body .hover-content .content-right .project-thumb {
    position: inherit;
    max-width: 100%;
  }
}

.project-accordion .accordion-item .show .accordion-body .content-right {
  margin-top: -100px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 992px) {
  .project-accordion .accordion-item .show .accordion-body .content-right {
    margin-top: 20px;
  }
}

.project-accordion .accordion-item .show .accordion-body .content-right .project-thumb {
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/**----------------------------------------
START: Sponsor CSS
----------------------------------------*/
.sponsor-wrap {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #e5e5e5;
}

.dark .sponsor-wrap {
  border: 1px solid var(--rr-color-bg-1);
}

@media only screen and (max-width: 767px) {
  .sponsor-wrap {
    grid-template-columns: 1fr;
  }
}

.sponsor-wrap .sponsor-item {
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

@media only screen and (max-width: 767px) {
  .sponsor-wrap .sponsor-item {
    padding-right: 30px;
    padding-left: 30px;
  }
}

.sponsor-wrap .sponsor-item .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .sponsor-wrap .sponsor-item .title {
    padding-left: 10px;
  }
}

@media only screen and (max-width: 992px) {
  .sponsor-wrap .sponsor-item .title {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .sponsor-wrap .sponsor-item .title {
    padding-left: 0;
  }
}

.sponsor-wrap .sponsor-item.item-1 {
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .sponsor-wrap .sponsor-item.item-1 {
    text-align: center;
  }
}

.sponsor-wrap .sponsor-item:not(:last-of-type) {
  border-right: 1px solid #e5e5e5;
}

.dark .sponsor-wrap .sponsor-item:not(:last-of-type) {
  border-right: 1px solid var(--rr-color-bg-1);
}

@media only screen and (max-width: 767px) {
  .sponsor-wrap .sponsor-item:not(:last-of-type) {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }

  .dark .sponsor-wrap .sponsor-item:not(:last-of-type) {
    border-bottom: 1px solid var(--rr-color-bg-1);
  }
}

@media only screen and (max-width: 992px) {
  .sponsor-wrap .sponsor-item img {
    max-width: 75px;
  }
}

/**----------------------------------------
START: Footer CSS
----------------------------------------*/
.copyright-content {
  align-items: center;
}

@media only screen and (max-width: 992px) {
  .copyright-content {
    margin-top: 0;
  }
}

@media only screen and (max-width: 767px) {
  .copyright-content {
    row-gap: 0px;
  }
}

.copyright-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-family: var(--rr-ff-body);
  margin: 0;
}

.copyright-content p span {
  color: var(--rr-color-theme-primary);
}

@media only screen and (max-width: 767px) {
  .copyright-content p {
    text-align: center;
  }
}

.copyright-content .social-list {
  display: flex;
  align-items: center;
  justify-content: end;
  list-style: none;
}

@media only screen and (max-width: 767px) {
  .copyright-content .social-list {
    justify-content: center;
  }
}

.copyright-content .social-list li a {
  background-color: var(--rr-color-border-1);
  color: var(--rr-color-common-white);
  font-size: 13px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-content .social-list li a:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.copyright-content .social-list li:not(:last-of-type) {
  margin-right: 10px;
}

/* modern agency 2 page css */
.hero-content-4 {
  padding: 360px 0 110px 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 1199px) {
  .hero-content-4 {
    padding: 260px 0 100px 0;
  }
}

@media only screen and (max-width: 992px) {
  .hero-content-4 {
    padding: 100px 0 100px 0;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-4 {
    padding: 80px 0;
  }
}

.hero-content-4 .sub-title {
  font-size: 100px;
  font-weight: 200;
}

@media only screen and (max-width: 992px) {
  .hero-content-4 .sub-title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-4 .sub-title {
    font-size: 24px;
  }
}

.hero-content-4 .title {
  font-size: 160px;
  font-weight: 700;
}

@media only screen and (max-width: 992px) {
  .hero-content-4 .title {
    font-size: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-4 .title {
    font-size: 45px;
  }
}

.hero-content-4 .title span {
  position: relative;
  z-index: 1;
  line-height: 1;
  color: var(--rr-color-theme-primary);
}

.dark .hero-content-4 .title span {
  color: var(--primary);
}

.hero-content-4 .title span:before {
  content: attr(data-text);
  position: absolute;
  right: 7px;
  top: 10px;
  width: 100%;
  font-size: 160px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

@media only screen and (max-width: 992px) {
  .hero-content-4 .title span:before {
    font-size: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content-4 .title span:before {
    font-size: 45px;
    top: 8px;
  }
}

.hero-content-4 .rr-primary-btn {
  margin-top: 50px;
}

@media only screen and (max-width: 767px) {
  .hero-content-4 .rr-primary-btn {
    margin-top: 30px;
  }
}

.hero-section-4 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-section-4 .shapes .shape {
  position: absolute;
}

.hero-section-4 .shapes .shape.shape-1 {
  top: 0;
  left: 0;
}

.hero-section-4 .shapes .shape.shape-2 {
  bottom: 0;
  left: 0;
}

.hero-section-4 .hero-img {
  max-width: 950px;
  width: 100%;
  height: 690px;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (max-width: 1600px) {
  .hero-section-4 .hero-img {
    max-width: 750px;
  }
}

@media (max-width: 1199px) {
  .hero-section-4 .hero-img {
    max-width: 550px;
  }
}

@media only screen and (max-width: 992px) {
  .hero-section-4 .hero-img {
    max-width: 450px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-4 .hero-img {
    display: none;
  }
}

.hero-section-4 .hero-img:before {
  background-color: rgba(131, 131, 131, 0.63);
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-section-4 .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-item-3 {
  padding: 40px 30px;
  background-color: var(--rr-color-grey-light);
  border: none;
}

.dark .service-item-3 {
  background-color: var(--rr-color-bg-1);
  border: 1px solid var(--rr-color-border-1);
}

.service-item-3 .service-icon-wrap {
  border-radius: 50%;
}

.service-item-3 .service-icon-wrap .service-icon {
  height: 110px;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 30px;
  background-color: var(--rr-color-common-white);
  border: none;
}

.dark .service-item-3 .service-icon-wrap .service-icon {
  background: radial-gradient(50% 5688.89% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid #3E3E3E;
}

.service-item-3 .service-icon-wrap .service-icon svg {
  color: var(--rr-color-theme-primary);
}

.dark .service-item-3 .service-icon-wrap .service-icon svg {
  color: var(--rr-color-common-white);
}

.service-item-3 .title {
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 24px;
  line-height: 28px;
}

.service-item-3 p {
  color: #74787C;
  font-size: 16px;
  line-height: 28px;
  font-family: var(--rr-ff-p);
}

.service-item-3 p:last-child {
  margin-bottom: 0;
}

.service-item-3:hover .service-icon svg {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.about-section-5 {
  overflow: hidden;
}

.about-content-5 {
  padding-right: 60px;
}

@media only screen and (max-width: 992px) {
  .about-content-5 {
    padding-right: 0;
  }
}

.about-tab .nav-tabs {
  margin-bottom: 40px;
  border: none;
  row-gap: 20px;
}

.about-tab .nav-tabs .nav-link {
  background-color: var(--rr-color-bg-1);
  color: var(--rr-color-common-white);
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 25px;
}

.about-tab .nav-tabs .nav-link:not(:last-of-type) {
  margin-right: 20px;
}

.about-tab .nav-tabs .nav-link.active {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.about-tab .tab-content .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.about-img-wrap-5 {
  position: relative;
  padding-bottom: 70px;
}

.about-img-wrap-5 .shapes .shape {
  position: absolute;
  z-index: -1;
}

.about-img-wrap-5 .shapes .shape.shape-1 {
  top: -10%;
  right: 10%;
}

.about-img-wrap-5 .shapes .shape.shape-2 {
  top: 5%;
  right: -15%;
}

.about-img-wrap-5 .img-1 {
  height: 490px;
  max-width: 505px;
  width: 100%;
  object-fit: cover;
}

.about-img-wrap-5 .about-img-2 {
  max-width: 323px;
  width: 100%;
  height: 338px;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (max-width: 767px) {
  .about-img-wrap-5 .about-img-2 {
    border: none;
  }
}

.about-img-wrap-5 .about-img-2 .img-2 {
  border-top: 10px solid #02050A;
  border-left: 10px solid #02050A;
  object-fit: cover;
}

.testi-content-4 {
  padding-right: 40px;
}

@media only screen and (max-width: 992px) {
  .testi-content-4 {
    padding-right: 0;
  }
}

.testi-top {
  display: flex;
  justify-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 15px;
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
}

.testi-top:before {
  background-color: var(--rr-color-border-light);
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}

.dark .testi-top:before {
  background-color: var(--rr-color-border-1);
}

.testi-top .quote {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--rr-color-grey-light);
  border-color: var(--rr-color-grey-light);
}

.dark .testi-top .quote {
  background-color: var(--rr-color-bg-1);
  border: 1px solid var(--rr-color-border-1);
}

.testi-top .quote img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.dark .testi-top .quote .light-img {
  display: none;
}

.testi-top .quote .dark-img {
  display: none;
}

.dark .testi-top .quote .dark-img {
  display: block;
}

.testi-top .swiper-arrow {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.testi-top .swiper-arrow .swiper-nav {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--rr-color-grey-light);
  border-color: var(--rr-color-grey-light);
  color: var(--rr-color-theme-primary);
}

.dark .testi-top .swiper-arrow .swiper-nav {
  border: 1px solid var(--rr-color-border-1);
  color: var(--rr-color-common-white);
  background-color: var(--rr-color-bg-1);
}

.testi-top .swiper-arrow .swiper-nav:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
  border: 1px solid var(--rr-color-theme-primary);
}

.testi-box p {
  font-size: 22px;
  margin-bottom: 40px;
  line-height: 1.5;
  color: #74787C;
}

.testi-box .author-box {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.testi-box .author-box img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 3px solid var(--rr-color-theme-primary);
}

.testi-box .author-box .name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0;
}

.testi-box .author-box .name span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--rr-color-text-body);
  margin-top: 10px;
}

.testi-img-4 {
  max-width: 630px;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 992px) {
  .testi-img-4 {
    margin: 0 auto;
    margin-top: 20px;
  }
}

.testi-img-4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Case Study CSS */
.cs-item {
  padding: 40px;
  background-color: var(--rr-color-grey-light);
}

@media only screen and (max-width: 992px) {
  .cs-item {
    padding: 20px;
  }
}

.dark .cs-item {
  background-color: var(--rr-color-bg-1);
}

.cs-item .cs-thumb {
  position: relative;
}

.cs-item .cs-thumb:before {
  background-color: var(--rr-color-theme-primary);
  content: "";
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.cs-item .cs-thumb .cs-btn {
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-theme-primary);
  height: 120px;
  width: 120px;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  transition-delay: 200ms;
}

.cs-item .cs-thumb .cs-btn i {
  transform: rotate(-45deg);
  font-weight: 600;
}

.cs-item .cs-thumb .cs-btn:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 992px) {
  .cs-item .cs-thumb .cs-btn {
    height: 80px;
    width: 80px;
    font-size: 30px;
  }
}

.cs-item .cs-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cs-item .cs-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 15px;
  column-gap: 20px;
  margin-top: 40px;
}

@media only screen and (max-width: 992px) {
  .cs-item .cs-content {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .cs-item .cs-content {
    column-gap: 10px;
  }
}

.cs-item .cs-content span {
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-heading-primary);
  font-size: 14px;
  font-weight: 700;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.cs-item .cs-content .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
}

@media only screen and (max-width: 992px) {
  .cs-item .cs-content .title {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .cs-item .cs-content .title {
    font-size: 15px;
  }
}

.cs-item:hover .cs-thumb:before {
  visibility: visible;
  opacity: 1;
}

.cs-item:hover .cs-thumb .cs-btn {
  transform: translate(-50%, -50%) scale(1);
}

.cs-item:hover .cs-content span {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

/* Grow CSS */
.grow-item {
  display: grid;
  align-items: center;
  grid-template-columns: 80px 1fr;
  grid-gap: 30px;
}

@media only screen and (max-width: 767px) {
  .grow-item {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
}

.grow-item .grow-icon {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--rr-color-grey-light);
  border-color: var(--rr-color-grey-light);
}

.dark .grow-item .grow-icon {
  border: 1px solid #3E3E3E;
  background: radial-gradient(50% 5688.89% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

.grow-item .grow-icon svg {
  color: var(--rr-color-theme-primary);
}

.dark .grow-item .grow-icon svg {
  color: var(--rr-color-common-white);
}

.grow-item .grow-content .top-content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.grow-item .grow-content .top-content .title {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .grow-item .grow-content .top-content .title {
    font-size: 30px;
  }
}

.grow-item .grow-content .top-content .title .odometer-auto-theme {
  font-family: inherit;
  line-height: 1;
}

.grow-item .grow-content .top-content .title .odometer-digit-spacer {
  padding-right: 2px;
}

.grow-item .grow-content .top-content p {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  margin-left: 10px;
  color: var(--rr-color-text-body-light);
}

.dark .grow-item .grow-content .top-content p {
  color: var(--rr-color-common-white);
}

.grow-item .grow-content p {
  font-size: 16px;
  color: #74787C;
}

@media (max-width: 1199px) {
  .grow-item .grow-content p br {
    display: none;
  }
}

.grow-item .grow-content p:last-child {
  margin-bottom: 0;
}

/* Brand CSS */
.brand-section {
  overflow: hidden;
}

.brand-wrap {
  max-width: 1840px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--rr-color-grey-light);
}

.dark .brand-wrap {
  background-color: var(--rr-color-bg-1);
}

.brand-wrap .round-shape {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.brand-wrap .brand-img-wrap {
  background-color: var(--rr-color-bg-1);
  mask-image: url(../imgs/modern-agency-2/mask-img-1.webp);
  mask-repeat: no-repeat;
  mask-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.brand-wrap .brand-img-wrap .brand-img {
  position: relative;
  height: 100%;
  width: 100%;
}

.brand-wrap .brand-img-wrap .brand-img:before {
  background-color: #3F5AF3;
  mix-blend-mode: multiply;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.brand-wrap .brand-img-wrap .brand-img img {
  width: 883px;
  height: 640px;
  position: absolute;
  top: -7%;
  right: -3%;
  object-position: center;
  object-fit: cover;
  filter: saturate(0);
}

.brand-content .section-heading .section-title {
  margin-bottom: 30px;
}

.brand-content .section-heading p {
  margin-bottom: 30px;
  max-width: 690px;
  width: 100%;
  color: #74787C;
  font-size: 16px;
  line-height: 28px;
}

.brand-content .brand-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 30px;
  list-style: none;
  position: relative;
  z-index: 1;
}

.brand-content .brand-list li:not(:last-of-type) {
  margin-right: 100px;
}

@media (max-width: 1199px) {
  .brand-content .brand-list li:not(:last-of-type) {
    margin-right: 50px;
  }
}

.dark .brand-content .brand-list li .light-img {
  display: none;
}

.brand-content .brand-list li .dark-img {
  display: none;
}

.dark .brand-content .brand-list li .dark-img {
  display: block;
}

.brand-content .brand-list li a {
  display: block;
  max-width: 76px;
  width: 100%;
  height: 76px;
}

.post-card-2 {
  position: relative;
  z-index: 1;
}

.post-card-2 .post-content-wrap {
  position: absolute;
  bottom: 60px;
  left: 60px;
  z-index: 2;
  padding-right: 50px;
}

@media only screen and (max-width: 992px) {
  .post-card-2 .post-content-wrap {
    left: 30px;
    bottom: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .post-card-2 .post-content-wrap {
    left: 20px;
    bottom: 20px;
    padding-right: 20px;
  }
}

.post-card-2 .post-content-wrap .post-content .post-meta li {
  color: var(--rr-color-common-white);
}

.post-card-2 .post-content-wrap .post-content .title {
  font-weight: 700;
}

.post-card-2 .post-content-wrap .post-content .title a {
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: var(--rr-color-common-white);
}

.post-card-2 .post-content-wrap .post-content .title a:hover {
  color: var(--rr-color-common-white);
  background-size: 100% 2px;
}

.post-card-2 .post-content-wrap .post-content .rr-primary-btn {
  padding: 14.5px 30px;
}

.post-card-2:hover .post-thumb:before {
  visibility: hidden;
  opacity: 0;
}

.post-card-2:hover .post-thumb:after {
  visibility: visible;
  opacity: 1;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 20px;
  padding: 100px 0 60px 0;
  margin-bottom: 80px;
  border-bottom: 1px solid var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .footer-top {
    padding: 50px 0;
    margin-bottom: 50px;
  }
}

.footer-top .footer-logo img {
  max-width: 200px;
}

@media (max-width: 1199px) {
  .footer-top .footer-logo img {
    max-width: 150px;
  }
}

.footer-top .social-list {
  display: flex;
  align-items: center;
  list-style: none;
}

.footer-top .social-list li a {
  background-color: var(--rr-color-border-1);
  color: var(--rr-color-common-white);
  font-size: 13px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-top .social-list li a:hover {
  background-color: var(--rr-color-theme-primary);
  color: var(--rr-color-common-white);
}

.footer-top .social-list li:not(:last-of-type) {
  margin-right: 10px;
}

.footer-2 .copyright-content p {
  color: var(--rr-color-text-body);
  margin-bottom: 0;
}

@media only screen and (max-width: 992px) {
  .footer-2 .copyright-content p {
    text-align: center;
    margin-bottom: 15px !important;
  }
}

.footer-2 .copyright-content .copyright-list {
  display: flex;
  align-items: center;
  justify-content: end;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 10px;
}

@media only screen and (max-width: 992px) {
  .footer-2 .copyright-content .copyright-list {
    justify-content: center;
  }
}

.footer-2 .copyright-content .copyright-list li {
  position: relative;
  font-family: var(--rr-ff-body);
  font-size: 16px;
  line-height: 1.625;
  font-weight: normal;
}

.footer-2 .copyright-content .copyright-list li:not(:last-of-type) {
  padding-right: 20px;
  margin-right: 20px;
}

@media only screen and (max-width: 767px) {
  .footer-2 .copyright-content .copyright-list li:not(:last-of-type) {
    margin-right: 10px;
    padding-right: 0;
  }
}

.footer-2 .copyright-content .copyright-list li:not(:last-of-type):before {
  content: "|";
  color: var(--rr-color-common-white);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .footer-2 .copyright-content .copyright-list li:not(:last-of-type):before {
    display: none;
  }
}

.footer-2 .copyright-content .copyright-list li a {
  color: var(--rr-color-common-white);
}

.footer-2 .copyright-content .copyright-list li a:hover {
  color: var(--rr-color-theme-primary);
}

/* it solution page css */
.rr-container-1405 {
  max-width: 1405px;
}

.body-it-solution.dark {
  background-color: #02050A;
}

@-webkit-keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }

  33.3% {
    transform: translateY(-6px);
  }

  49.95% {
    transform: translateY(4px);
  }

  66.6% {
    transform: translateY(-2px);
  }

  83.25% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }

  33.3% {
    transform: translateY(-6px);
  }

  49.95% {
    transform: translateY(4px);
  }

  66.6% {
    transform: translateY(-2px);
  }

  83.25% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Fade Effect */
.runok-fadeIn {
  animation-name: asFadeIn;
}

@keyframes asFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.runok-fadeInLeft {
  animation-name: asFadeInLeft;
}

@keyframes asFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
  }
}

.runok-fadeInRight {
  animation-name: asFadeInRight;
}

@keyframes asFadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
  }
}

.runok-fadeInDown {
  animation-name: asFadeInTop;
}

@keyframes asFadeInTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
  }
}

.runok-fadeInUp {
  animation-name: asFadeInBottom;
}

@keyframes asFadeInBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
  }
}

/* Theme Slider CSS */
.slider-section {
  position: relative;
  overflow: hidden;
}

.slider-section .slider-tab-wrap {
  position: absolute;
  bottom: 80px;
  left: 250px;
  z-index: 2;
  max-width: 750px;
  width: 100%;
}

@media (max-width: 1600px) {
  .slider-section .slider-tab-wrap {
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.runok-slider {
  position: relative;
  z-index: 2;
}

.slider-item {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.slider-item .overlay {
  background: #0E0E14;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.73;
}

.slider-item .shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.slider-item .shape img {
  height: 100%;
}

.slider-item .slide-img-wrap {
  height: 960px;
}

@media only screen and (max-width: 992px) {
  .slider-item .slide-img-wrap {
    height: 550px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-item .slide-img-wrap {
    height: 450px;
  }
}

.slider-item .slide-img-wrap img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.slider-item .slider-content-wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  width: 100%;
  z-index: 10;
}

.slider-item .slider-content-wrap .it-hero-content-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 15px;
}

@media only screen and (max-width: 992px) {
  .slider-item .slider-content-wrap .it-hero-content-wrap {
    margin-bottom: 170px;
  }
}

@media only screen and (max-width: 767px) {
  .slider-item .slider-content-wrap .it-hero-content-wrap {
    flex-wrap: wrap;
    row-gap: 25px;
    margin-bottom: 0px;
  }
}

.slider-item .slider-content-wrap .it-hero-content-wrap .it-hero-content {
  padding: 0;
  margin-left: 0;
}

.slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(3.5px);
  font-size: 60px;
  color: var(--rr-color-common-white);
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease-in-out 0s;
}

@media only screen and (max-width: 767px) {
  .slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn {
    height: 100px;
    width: 100px;
    font-size: 30px;
  }
}

.slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn i {
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn:hover i {
  transform: rotate(0);
}

@media only screen and (max-width: 767px) {
  .slider-tab-wrap {
    display: none;
  }
}

.slider-tab-wrap .swiper-slide .slider-tab-btn {
  font-family: var(--rr-ff-heading);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 30px;
  text-align: center;
  cursor: pointer;
  color: var(--rr-color-common-white);
  line-height: 1.625;
}

.slider-tab-wrap .swiper-slide.swiper-slide-thumb-active {
  background-color: var(--rr-color-common-white);
  color: var(--rr-color-theme-primary);
}

.slider-tab-wrap .swiper-slide.swiper-slide-thumb-active .slider-tab-btn {
  color: var(--rr-color-heading-primary);
}

.dark .slider-tab-wrap .swiper-slide.swiper-slide-thumb-active .slider-tab-btn {
  color: var(--rr-color-theme-primary);
}

.runok-swiper-pagination {
  height: 100%;
  width: auto !important;
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50px !important;
  z-index: 2;
}

@media (max-width: 1399px) {
  .runok-swiper-pagination {
    left: 25px !important;
  }
}

@media (max-width: 1250px) {
  .runok-swiper-pagination {
    display: none;
  }
}

.runok-swiper-pagination .swiper-pagination-bullet {
  background-color: transparent;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50%;
  opacity: 1;
  display: block;
}

.runok-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--rr-color-common-white);
}

.runok-swiper-pagination .swiper-pagination-bullet:before {
  content: "";
  background-color: var(--rr-color-common-white);
  width: 5px;
  height: 5px;
  border: 1px solid var(--rr-color-common-white);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.runok-swiper-pagination .swiper-pagination-bullet:not(:last-of-type) {
  margin-bottom: 10px;
}

/* hero area style  */
.it-hero-content {
  padding: 300px 0 150px 0;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding-left: 55px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1199px) {
  .it-hero-content {
    padding-left: 0;
  }
}

@media only screen and (max-width: 992px) {
  .it-hero-content {
    padding: 100px 0 100px 40px;
  }
}

@media only screen and (max-width: 767px) {
  .it-hero-content {
    padding-left: 0;
  }
}

.it-hero-content .sub-title {
  font-size: 50px;
  font-weight: 700;
  color: var(--rr-color-common-white);
  font-family: var(--rr-ff-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease-in-out 0s;
}

@media only screen and (max-width: 992px) {
  .it-hero-content .sub-title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .it-hero-content .sub-title {
    font-size: 24px;
  }
}

.it-hero-content .title {
  font-size: 135px;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  color: var(--rr-color-common-white);
  font-family: var(--rr-ff-heading);
  margin-bottom: 0.5rem;
  transition: all 0.3s ease-in-out 0s;
}

@media only screen and (max-width: 992px) {
  .it-hero-content .title {
    font-size: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .it-hero-content .title {
    font-size: 50px;
  }
}

.it-hero-content .title:before {
  background: linear-gradient(270deg, #3F5AF3 0%, transparent 100%);
  content: "";
  width: 100%;
  height: 76%;
  position: absolute;
  top: 15%;
  right: 0;
  z-index: -1;
  opacity: 0.95;
  display: block;
}

.it-hero-content .bottom-title {
  font-size: 75px;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--rr-color-common-white);
  font-family: var(--rr-ff-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease-in-out 0s;
}

@media only screen and (max-width: 992px) {
  .it-hero-content .bottom-title {
    font-size: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .it-hero-content .bottom-title {
    font-size: 30px;
  }
}

.it-hero-content .hero-btn {
  background-image: url(../img/bg-img/hero-btn-bg.png);
  color: var(--rr-color-common-white);
  font-size: 60px;
  height: 180px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .it-hero-content .hero-btn {
    height: 120px;
    width: 120px;
    font-size: 40px;
  }
}

.it-hero-content .hero-btn i {
  transform: rotate(-45deg) scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.it-hero-content .hero-btn:before {
  background-color: #3F5AF3;
  mix-blend-mode: multiply;
  content: "";
  width: 170px;
  height: 170px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.9;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
  .it-hero-content .hero-btn:before {
    height: 110px;
    width: 110px;
  }
}

.it-hero-content .hero-btn:hover:before {
  width: 100%;
  height: 100%;
}

.it-hero-content .hero-btn:hover i {
  transform: rotate(-45deg) scale(1.05);
}

.about-img-6 {
  max-width: 678px;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 992px) {
  .about-img-6 {
    margin: 0 auto;
  }
}

.about-content-6 {
  padding-left: 30px;
}

@media only screen and (max-width: 992px) {
  .about-content-6 {
    margin-top: 40px;
    padding-left: 0;
  }
}

.about-content-6 .section-heading {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #E6E6E6;
}

.dark .about-content-6 .section-heading {
  border-color: var(--rr-color-border-1);
}

.about-content-6 .section-heading .section-title {
  margin-bottom: 20px;
}

.about-content-6 .section-heading p {
  font-family: var(--rr-ff-p);
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  color: #74787C;
  margin-bottom: 15px;
  line-height: 28px;
}

.dark .about-content-6 .section-heading p {
  color: var(--rr-color-text-body);
}

.about-content-6 .about-card .icon {
  background-color: rgba(63, 90, 243, 0.1);
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 25px;
}

.about-content-6 .about-card .icon img {
  height: 41px;
  width: 41px;
}

.about-content-6 .about-card .title {
  margin-bottom: 20px;
  font-size: 24px;
  font-family: var(--rr-ff-heading);
  line-height: 1.2;
  color: var(--rr-color-heading-primary);
  font-weight: 600;
}

.dark .about-content-6 .about-card .title {
  color: var(--rr-color-common-white);
}

.about-content-6 .about-card p {
  margin-bottom: 0;
  color: #74787C;
  font-family: var(--rr-ff-p);
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
}

.dark .about-content-6 .about-card p {
  color: var(--rr-color-text-body);
}

@media only screen and (max-width: 992px) {
  .about-wrap-7 {
    flex-direction: column-reverse;
  }
}

.about-content-7 {
  padding-right: 30px;
}

@media only screen and (max-width: 992px) {
  .about-content-7 {
    margin-top: 40px;
    padding-right: 0;
  }
}

.about-content-7 .section-heading {
  margin-bottom: 30px;
}

.about-content-7 .section-heading .section-title {
  margin-bottom: 25px;
}

.about-content-7 .section-heading p {
  color: #74787C;
  font-family: var(--rr-ff-p);
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
  margin-bottom: 15px;
}

.dark .about-content-7 .section-heading p {
  color: var(--rr-color-text-body);
}

.about-content-7 .about-list-wrap span {
  color: var(--rr-color-heading-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  display: block;
  line-height: 1.625;
}

.dark .about-content-7 .about-list-wrap span {
  color: var(--rr-color-common-white);
}

.about-content-7 .about-list-wrap .about-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  margin-bottom: 40px;
}

.about-content-7 .about-list-wrap .about-list li {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-family: var(--rr-ff-body);
  font-size: 16px;
  line-height: 1.625;
  color: #74787C;
}

.dark .about-content-7 .about-list-wrap .about-list li {
  color: var(--rr-color-text-body);
}

.about-content-7 .about-list-wrap .about-list li:not(:last-of-type) {
  margin-right: 40px;
}

.about-content-7 .about-list-wrap .about-list li i {
  color: var(--rr-color-theme-primary);
}

.about-content-7 .rr-primary-btn {
  border-radius: 100px;
}

.service-card {
  background-color: var(--rr-color-common-white);
  display: grid;
  grid-template-columns: 85px 1fr;
  grid-gap: 30px;
  border: 1px solid #E6E6E6;
  padding: 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.dark .service-card {
  background-color: var(--rr-color-bg-1);
  border-color: var(--rr-color-border-1);
}

@media only screen and (max-width: 992px) {
  .service-card {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
}

.service-card .shape {
  position: absolute;
  top: -15px;
  left: -15px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.service-card .icon {
  background-color: #E8EDF9;
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.service-card .icon img {
  height: 45px;
  width: 45px;
}

.service-card .content .title {
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 24px;
  font-family: var(--rr-ff-heading);
  line-height: 1.2;
}

.dark .service-card .content .title {
  color: var(--rr-color-common-white);
}

@media only screen and (max-width: 992px) {
  .service-card .content .title {
    font-size: 20px;
  }
}

.service-card .content p {
  color: #74787C;
  font-family: var(--rr-ff-p);
  font-size: 16px;
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
  margin-bottom: 15px;
}

.dark .service-card .content p {
  color: var(--rr-color-text-body);
}

.service-card .content .read-more {
  font-size: 16px;
  font-weight: 700;
  color: var(--rr-color-heading-primary);
}

.dark .service-card .content .read-more {
  color: var(--rr-color-theme-primary);
}

.service-card .content .read-more i {
  margin-left: 5px;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.service-card .content .read-more:hover i {
  margin-left: 10px;
}

.service-card:hover .shape {
  top: 0;
  left: 0;
  visibility: visible;
  opacity: 0.05;
}

.dark .service-card:hover .shape {
  opacity: 1;
}

.process-3 {
  position: relative;
  z-index: 1;
}

.process-3 .bg-shape {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.03;
}

.process-counter-wrap>div:not(:first-of-type) .counter-card {
  padding-left: 20px;
}

@media only screen and (max-width: 992px) {
  .process-counter-wrap>div:not(:first-of-type) .counter-card {
    padding-left: 0;
  }
}

.process-counter {
  border-bottom: 1px solid #E6E6E6;
}

.dark .process-counter {
  border-color: var(--rr-color-border-1);
}

@media only screen and (max-width: 767px) {
  .process-counter {
    padding: 50px 0 20px 0;
  }
}

.process-counter .counter-card {
  display: grid;
  align-items: center;
  grid-template-columns: 80px 1fr;
  grid-gap: 20px;
  padding: 60px 0;
  border-right: 1px solid #E6E6E6;
}

.dark .process-counter .counter-card {
  border-color: var(--rr-color-border-1);
}

.process-counter .counter-card.card-4 {
  border-right: none;
}

@media only screen and (max-width: 767px) {
  .process-counter .counter-card {
    border-right: none;
    padding: 0;
    margin-bottom: 30px;
  }
}

.process-counter .counter-card .icon {
  background-color: var(--rr-color-theme-primary);
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.dark .process-counter .counter-card .icon {
  background-color: #1E2228;
}

.process-counter .counter-card .icon img {
  height: 45px;
  width: 45px;
}

.process-counter .counter-card .content .title {
  font-family: var(--rr-ff-p);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
  color: var(--rr-color-heading-primary);
}

.dark .process-counter .counter-card .content .title {
  color: var(--rr-color-common-white);
}

.process-counter .counter-card .content .title .odometer-auto-theme {
  font-family: inherit;
  line-height: 1;
}

.process-counter .counter-card .content p {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 0;
  color: #74787C;
  line-height: 28px;
}

.dark .process-counter .counter-card .content p {
  color: var(--rr-color-text-body);
}

.testi-carousel-wrap .testi-thumb-wrap {
  max-width: 310px;
  width: 100%;
  margin-bottom: 35px;
}

.testi-carousel-wrap .testi-thumb-wrap .thumb-carousel .swiper-slide .testi-thumb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid transparent;
  cursor: pointer;
}

.testi-carousel-wrap .testi-thumb-wrap .thumb-carousel .swiper-slide.swiper-slide-thumb-active .testi-thumb {
  border: 3px solid var(--rr-color-theme-primary);
}

.testi-carousel-wrap .content-carousel .testi-content {
  max-width: 640px;
}

.testi-carousel-wrap .content-carousel .testi-content p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #74787C;
  font-family: var(--rr-ff-p);
  font-weight: var(--rr-fw-normal);
  line-height: 28px;
}

.dark .testi-carousel-wrap .content-carousel .testi-content p {
  color: var(--rr-color-text-body);
}

.testi-carousel-wrap .content-carousel .testi-content .author-info .name {
  font-size: 24px;
  margin-bottom: 5px;
  color: var(--rr-color-heading-primary);
}

.dark .testi-carousel-wrap .content-carousel .testi-content .author-info .name {
  color: var(--rr-color-common-white);
}

.testi-carousel-wrap .content-carousel .testi-content .author-info span {
  font-size: 14px;
  font-family: var(--rr-ff-body);
}

.dark .testi-carousel-wrap .content-carousel .testi-content .author-info span {
  color: var(--rr-color-text-body);
}

.testi-img-5 {
  max-width: 640px;
  width: 100%;
  height: 100%;
  margin-left: auto;
}

@media only screen and (max-width: 992px) {
  .testi-img-5 {
    margin: 0 auto;
    margin-top: 40px;
    height: auto;
  }
}

.testi-img-5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-section-5 {
  position: relative;
  z-index: 1;
}

.cta-section-5 .bg-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.cta-section-5 .overlay {
  background: #3F5AF3;
  mix-blend-mode: multiply;
  transform: rotate(180deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.cta-section-5 .overlay-2 {
  background: linear-gradient(266.79deg, #1C1C1C 51.86%, rgba(28, 28, 28, 0.32) 78.29%);
  mix-blend-mode: difference;
  opacity: 0.47;
  transform: rotate(180deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.cta-section-5 .overlay-3 {
  background: linear-gradient(266.79deg, #1C1C1C 51.86%, rgba(28, 28, 28, 0.32) 78.29%);
  mix-blend-mode: multiply;
  opacity: 0.15;
  transform: rotate(180deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.cta-wrap-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 40px;
}

.cta-wrap-5 .section-heading .sub-heading {
  color: var(--rr-color-common-white);
}

.cta-wrap-5 .section-heading .sub-heading:before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}

.cta-wrap-5 .section-heading .section-title {
  color: var(--rr-color-common-white);
}

.cta-wrap-5 .cta-btn .rr-primary-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(8.5px);
  border-radius: 100px;
  padding: 18px 30px;
}

/* footer area style  */
.footer-4 .footer-wrap {
  padding: 130px 0;
}

@media only screen and (max-width: 992px) {
  .footer-4 .footer-wrap {
    padding: 80px 0 0 0;
  }
}

.footer-4 .logo-widget p {
  margin-bottom: 40px;
}

.footer-4 .logo-widget .social-list li a {
  background-color: #1E2228;
  border-radius: 50%;
  border: none;
}

.footer-4 .logo-widget .social-list li a:hover {
  background-color: var(--rr-color-theme-primary);
}

.it-copyright-area {
  border-top: 1px solid var(--rr-color-border-1);
  padding: 40px 0;
}

@media only screen and (max-width: 992px) {
  .it-copyright-area {
    padding: 40px 0;
  }
}

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


/* Must fill the hero (no zero-size) */
.bz-hero-unicorn-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* remove this if you need it clickable */
  /* pointer-events: none; */
}
/* Give the hero a real height (vh or min-height), or it may collapse briefly */
.bz-hero-video {
  position: relative;
  min-height: 70vh; /* adjust to taste */
  overflow: hidden;
}


/* --- Glass header shell --- */
.header-area-2 {
  position: sticky;
  top: 35px;               /* distance from top */
  z-index: 1000;
}










/* ================================
   LIQUID GLASS BACKGROUND FOR MENU
   ================================ */
.header-main.glass-bar {
  --bg-color: rgba(255,255,255,0.25);
  --highlight: rgba(255,255,255,0.75);
  --dark-overlay: rgba(0,0,0,0.5);

  position: relative;
  border-radius: 0 !important; /* no rounding */
  overflow: hidden;
  background: transparent;
  isolation: isolate;

  /* clean drop shadow beneath menu */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
}

/* Layer 1: glass distortion / blur */
.header-main.glass-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(1.2) brightness(1.15);
  z-index: 1;
  pointer-events: none;
  border-radius: 0;
}

/* Layer 2: dark tint overlay (no gradient, no weird borders) */
.header-main.glass-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000b7;
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
}

/* Layer 3: actual nav content */
.header-main.glass-bar .header-area-2__inner {
  position: relative;
  z-index: 3;
}

/* Optional: dark mode adjustment */
@media (prefers-color-scheme: dark) {
  .header-main.glass-bar {
    --bg-color: rgba(0,0,0,0.25);
    --highlight: rgba(255,255,255,0.15);
    --dark-overlay: rgba(0,0,0,0.45);
  }
}






















/* remove any inner container padding that breaks the span */
.header-main.glass-bar .container,
.header-main.glass-bar .container.large {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* --- Inner layout --- */
.header-area-2__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 24px;        /* inner breathing room */
}

/* logo pinned left */
.header__logo img { height: 52px; display: block; }

/* nav + buttons all right aligned */
.header__nav { margin-left: auto; }
.main-menu > ul {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-menu > ul > li > a {
  color: #fff;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity .2s ease, transform .2s ease;
}
.main-menu > ul > li > a:hover { opacity:1; transform: translateY(-1px); }

/* call-to-action button next to nav */
.header__button { margin-left: 22px; }
.rr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  color:#fff; border: 1px solid rgba(255,255,255,0.18);
  transition: background .2s ease, transform .2s ease;
}
.rr-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }

/* compact round icon on far right */
.header__navicon { margin-left: 10px; }
.header__navicon .side-toggle {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.12);
  transition: background .2s ease;
}
.header__navicon .side-toggle:hover { background: rgba(255,255,255,0.2); }
.header__navicon img { width: 18px; height: 18px; }

/* dropdowns inherit glass look */
.main-menu .dp-menu {
  position: absolute;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(20,20,20,0.7);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
}
.main-menu .dp-menu li a { color:#fff; opacity:.9; }
.main-menu .dp-menu li a:hover { opacity:1; }

/* make sure header sits over content */
body { padding-top: 0; }           /* no double spacing if you had earlier padding */

/* --- Responsive tweaks --- */
@media (max-width: 1100px){
  .main-menu > ul { gap: 18px; }
  .header-main.glass-bar { height: 72px; }
}
@media (max-width: 992px){
  /* hide desktop nav, keep icon/CTA for your side menu script */
  .header__nav { display:none; }
  .header__button { display:none; }
  .header__navicon { margin-left: auto; }
  .header-area-2__inner { padding: 0 14px; }
}

/* --- keep everything visually INSIDE the rounded glass --- */
.header-main.glass-bar{
  overflow: hidden;                 /* clips children to rounded corners */
}

/* --- robust layout: logo | nav (flexes) | CTA | icon --- */
.header-area-2__inner{
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* logo | nav | button | icon */
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 0 18px;
}

/* let nav occupy the flexible middle column and shrink if needed */
.header__nav{
  min-width: 0;          /* critical: allows children to shrink inside */
  position: static !important;   /* kill any absolute/right from the template */
}

/* make the UL behave and right-align items */
.main-menu{ position: static; }   /* some themes set absolute here */
.main-menu > ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  white-space: nowrap;            /* one line like your ref design */
  min-width: 0;                   /* allow flex shrink */
}

/* if the list ever gets too long, hide the tiny overflow instead of busting out */
.header__nav .main-menu > ul{
  overflow: hidden;               /* optional: trims 1–2px if super tight */
}

/* keep CTA & icon tight so nav has room */
.header__button{ margin-left: 6px; }
.header__navicon{ margin-left: 6px; }

/* smaller gaps on medium widths so it stays inside the bar */
@media (max-width: 1280px){
  .main-menu > ul{ gap: 18px; }
}

/* show desktop nav on all sizes unless you want the mobile toggle only */
@media (max-width: 992px){
  .header__nav{ display: block; } /* ensure it doesn't get hidden by old rules */
}

.main-menu {
    margin-right: 920px;

}

.header-main.glass-bar {
  border-radius: 9999px;   /* makes sides fully round like a capsule */
}

.header-main.glass-bar {
  width: calc(95% - 32px);  /* only 16px margin on each side */
  margin: 0 auto;
  border-radius: 9999px;
}

.header-main.glass-bar {
  height: 100px;        /* increase height */
  border-radius: 9999px; /* still pill-shaped */
}

.header-area-2__inner {
  height: 100%;          /* fills the new height */
  padding: 0 32px;       /* optional: more horizontal breathing room */
}

.header-area-2 { top: 2; }

:root{
  --accent:#0095c8;
}

/* ===== BASE NAV ===== */
.main-menu > ul > li > a{
  font-size: .9rem !important;
  position: relative;
  display:inline-block;
  font-family: "Helvetica-Bold", sans-serif;
  font-weight: 800;
  color:#fff;
  letter-spacing:.09em;
  transition: color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  text-transform: uppercase;
}

/* clean hover — color + small lift */
.main-menu > ul > li > a:hover{
  color: #ffffff !important;
  transform: translateY(-3px);
  text-shadow: 0 0 12px rgb(0, 191, 255); /* subtle inner glow only */
}

/* comet underline (left→right sweep) */
.main-menu > ul > li > a::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  height:2px; width:100%;
  background: var(--accent);
  border-radius:2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.main-menu > ul > li > a:hover::after{ transform: scaleX(1); }

/* optional: idle tiny float effect */
.main-menu > ul > li > a{
  animation: navFloat 6s ease-in-out infinite;
}
@keyframes navFloat{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

:root{ --accent:#0095c8; }

/* Base */
.main-menu > ul { gap: 28px; }
.main-menu > ul > li { position: relative; perspective: 800px; }
.main-menu > ul > li > a{
  position: relative; display:inline-block;
  color:#eaf2f6; text-decoration:none;
  transition: color .18s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}

/* --- Micro-Tilt (weightless) --- */
.nav-tilt > a:hover{
  transform: translateY(-3px) rotateX(.8deg) rotateY(-1.2deg) scale(1.03);
}

/* --- Arc-Underline (morphing capsule underline that “curves”) --- */
.nav-arc > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .44s cubic-bezier(.2,.9,.2,1);
  /* subtle arc illusion via box-shadow offsets */
  box-shadow:
    0 3px 0 0 var(--accent),
    0 -3px 0 0 transparent;
  opacity:.95;
}
.nav-arc > a:hover::after{ transform: scaleX(1); }

/* --- Glyph-Slide (letters slide upward with stagger & slight spread) --- */
.main-menu > ul > li > a .char{
  display:inline-block; transform: translateY(0) translateZ(0);
  transition: transform .34s cubic-bezier(.2,.9,.2,1);
}
.nav-glyph > a:hover .char{
  transform: translateY(-8px) translateX(calc(var(--i)*0.3px));
  transition-delay: calc(var(--i) * 9ms);
}

/* Accent color on hover for all variants */
.main-menu > ul > li:hover > a{ color:var(--accent); }

/* Underline + dot runner (minimal, no glow) */
.main-menu > ul > li > a::before{
  content:""; position:absolute; bottom:-8px; left:0; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
  transform: translateX(0) scale(0); opacity:0;
}
.main-menu > ul > li:hover > a::before{
  animation: runner 420ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes runner{
  0%   { opacity:0; transform: translateX(0) scale(.6); }
  15%  { opacity:1; }
  100% { opacity:1; transform: translateX(100%) scale(1); }
}

/* Magnetic micro-follow (subtle, no glow) */
.main-menu > ul > li .magnet{
  display:inline-block; transition: transform .12s ease-out;
  will-change: transform;
}

/* Responsiveness */
@media (max-width:1280px){ .main-menu > ul{ gap:20px; } }
@media (prefers-reduced-motion:reduce){
  .main-menu * { transition:none !important; animation:none !important; }
}

/* Liquid Fluid Glass Menu */


/* Liquid Fluid Glass Menu */




.floating-asset {
  position: absolute;
  top: 20px;      /* adjust as needed */
  right: 20px;    /* adjust as needed */
  max-width: 60px;
  pointer-events: none; /* optional: lets clicks pass through */
}


.inline-thumb{
  position:relative;
  display:inline-block;
  width:400px; /* size of thumbnail */
}
.thumb-video{ width:100%; height:auto; display:block; }
/* play button */
.playBut{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  cursor:pointer;
  
  /* add shadow to the whole button */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}
.triangle{
  stroke:#fff;
  stroke-dasharray:240;
  stroke-dashoffset:480;
  transition:all 0.7s ease-in-out;
}
.circle{
  stroke:#0095c8;
  stroke-dasharray:650;
  stroke-dashoffset:650;
  transition:all 0.5s ease-in-out;
  opacity:0.3;
}
.playBut:hover .triangle{
  stroke-dashoffset:0;
  stroke:#0095c8;
  animation:nudge 0.7s ease-in-out;
}
.playBut:hover .circle{
  stroke-dashoffset:0;
  opacity:1;
}
@keyframes nudge{
  0%{transform:translateX(0)}
  30%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  70%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

/* overlay */
.video-overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.85);
  opacity:0; visibility:hidden;
  transition:opacity 500ms ease, visibility 0s linear 500ms;
  z-index:100000;
}

/* open = fade in backdrop smoothly */
.video-overlay.open{
  opacity:1; visibility:visible; transition:opacity 500ms ease;
}

/* smooth pop-in for the video */
.video-overlay video{
  max-width:90vw; max-height:80vh; background:#000;
  box-shadow:0 0 15px rgba(0,0,0,.75);
  opacity:0; transform:scale(0.96);
  transition:opacity 300ms ease, transform 300ms ease;
  will-change: opacity, transform;
}

/* when overlay is open, fade/scale the video in */
.video-overlay.open video{
  opacity:1; transform:scale(1);
  transition-delay:120ms; /* start just after the overlay begins */
}

/* close button stays the same */
.video-overlay-close{
  position:fixed; top:15px; right:20px; z-index:100001;
  font-size:36px; color:#fff; text-decoration:none; cursor:pointer;
}


/* the custom cursor dot */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(1);
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

/* scale up cursor when hovering links/buttons */
a:hover ~ .cursor,
button:hover ~ .cursor {
  transform: translate(-50%, -50%) scale(8);
}

.mini-audio{
  position: fixed; top: 375px; right: 375px;
  height: 36px; padding: 6px 10px; gap: 10px;
  display: inline-flex; align-items: center;
  background: rgba(12,16,20,.72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #eaf8ff; z-index: 10000;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro", Segoe UI, Roboto, Arial, sans-serif;
}

/* Apply filter when active */
.hero-thumb img.distort {
  filter: url(#bz-distort);
  cursor: pointer;
}



:root {
  --corner-size: 30px;
  --corner-thickness: 1px;
  --corner-color: #ffffff; /* BlueZone  */
}

.fx-corners {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
}

/* Shared L-shape style */
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: var(--corner-color);
  border-radius: 2px; /* smooth edges */
}

/* horizontal */
.corner::before {
  height: var(--corner-thickness);
  width: 85%;
  bottom: 0; /* inward edge */
  left: 0;
}

/* vertical */
.corner::after {
  width: var(--corner-thickness);
  height: 85%;
  right: 0; /* inward edge */
  top: 0;
}

/* place them inward-facing */
.tl { top: 20px; left: 20px; transform: rotate(180deg); }
.tr { top: 20px; right: 20px; transform: rotate(270deg); }
.bl { bottom: 20px; left: 20px; transform: rotate(90deg); }
.br { bottom: 20px; right: 20px; transform: rotate(0deg); }

/* optional: gradient stroke for extra “cool” */
.corner::before,
.corner::after {
  background: linear-gradient(90deg, #ffffff, #c9b384);
}

/* ===== Video Background Hero ===== */
.bz-hero-video{
  position: relative;
  min-height: 100vh;             /* full screen */
  width: 100%;
  overflow: clip;                 /* clean edges on iOS */
}

.bz-hero-video__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(105%) contrast(102%) brightness(.9);
  transform: translateZ(0);       /* avoid repaint jank */
}

.bz-hero-video__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.45));
  pointer-events: none;
}

.bz-hero-video__play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  display: grid; place-items: center;
  width: 128px; height: 128px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: radial-gradient(60% 70% at 50% 35%, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  backdrop-filter: blur(6px);
}
.bz-hero-video__play:hover{
  transform: translate(-50%,-50%) scale(1.04);
  border-color:#fff;
  box-shadow: 0 0 24px rgba(255,255,255,.25);
}

/* SVG strokes for the ring/triangle */
.bz-hero-video__play .triangle,
.bz-hero-video__play .circle{
  stroke: #fff;
  opacity: .9;
}
@media (max-width: 640px){
  .bz-hero-video__play{ width: 96px; height: 96px; }
}

/* Respect users who prefer reduced motion — show poster, no autoplay */
@media (prefers-reduced-motion: reduce){
  .bz-hero-video__bg{ animation: none !important; }
}






.bz-hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

.bz-hero-logo {
  max-width: 1500px;   /* adjust as needed */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.bz-hero-text {
  font-size: .6rem;
  color: #fff;
  white-space: nowrap;     /* ✨ forces it to stay on one line */
  letter-spacing: 1px;     /* optional: adds breathing room */
  font-weight: 600;
}




/* container centers the logo; used as positioning context */
.copyright-area-inner { text-align: center; }

.copyright-text{
  position: relative;
  display: inline-block;            /* width matches the image */
}

/* pin labels directly on the image's top edge */
.label-left,
.label-right{
  position: absolute;
  bottom: 100%;                     /* sit on top edge of the image */
  transform: translateY(-8px);      /* small gap above the logo */

  /* hard resets to stop the “letters on new lines” thing */
  display: block;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  line-height: 1;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;                      /* adjust for theme */
  pointer-events: none;             /* labels don’t block clicks */
}

.label-left  { left: 13px;  text-align: left;  }
.label-right { right: 0; text-align: right; }

/* the logo */
.copyright-text img{
  display: block;
  width: min(92vw, 2000px);
  height: auto;
  margin: 0 auto;
}

  /* Hide the old logo box in this area */
.footer-area-2 .footer-widget-box.newsletter { display: none; }

/* Center the 3 columns as a group and space them evenly */
.footer-area-2 .footer-widget-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)); /* 3 equal columns */
  gap: 24px 72px;               /* row/column gaps */
  justify-content: center;      /* center the whole grid block */
  align-items: start;
  max-width: 1100px;            /* keeps it tidy on wide screens */
  margin: 0 auto;               /* centers the grid container */
  padding: 32px 16px 48px;      /* breathing room */
  margin-left: 400px;
}

/* Column text is left-aligned (clean lists), while the block is centered */
.footer-area-2 .footer-widget-box { text-align: left; }

/* Titles */
.footer-area-2 .footer-widget-box .title {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 12px;
}

/* Lists */
.footer-area-2 .footer-nav-list {
  
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-area-2 .footer-nav-list li { margin: 6px 0; }
.footer-area-2 .footer-nav-list a {
  color: #fff;                  /* match your theme */
  text-decoration: none;
  opacity: .9;
}
.footer-area-2 .footer-nav-list a:hover {
  opacity: 1;
  text-decoration: underline;   /* or keep it clean: remove this */
}

/* Responsive: stack neatly on small screens */
@media (max-width: 900px) {
  .footer-area-2 .footer-widget-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
    max-width: 700px;
  }
}
@media (max-width: 560px) {
  .footer-area-2 .footer-widget-wrapper {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .footer-area-2 .footer-widget-box { text-align: center; }
}

.footer-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  background: transparent;
}

.footer-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
}

.footer-marquee span {
  display: inline-block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.8;
}

/* Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Optional hover pause */
.footer-marquee:hover .footer-marquee-track {
  animation-play-state: paused;
}

/* hide the empty logo box in this row */
.footer-area-2 .footer-widget-box.newsletter { display: none; }

/* ===== Centered, even 3-column grid (auto-resizes on zoom/screens) ===== */
.footer-area-2 .footer-widget-wrapper {
  display: grid;
  /* auto-fit adds/remove columns as space changes; each column has a min width */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* responsive gaps that scale with viewport */
  gap: clamp(12px, 2vw, 28px) clamp(28px, 6vw, 96px);
  align-items: start;
  justify-items: center;                 /* centers each column’s content */
  max-width: 1100px;                     /* keeps the block tidy on widescreens */
  margin-inline: auto;                   /* centers the whole grid */
  padding: clamp(16px, 3vw, 40px) 1rem;  /* fluid padding */
  text-align: center;                    /* center titles + links */
}

/* tidy column content */
.footer-area-2 .footer-widget-box .title {
  margin: 0 0 .75rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .05em;
  color: #a8a8a8;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem); /* scales with zoom/screen */
}

.footer-area-2 .footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-area-2 .footer-nav-list li {
  margin: .35rem 0;
  font-size: clamp(0.9rem, 1vw, 1rem);   /* consistent type on zoom */
}

.footer-area-2 .footer-nav-list a {
  color: #fff;
  text-decoration: none;
  letter-spacing: .04em;
  opacity: .9;
}

.footer-area-2 .footer-nav-list a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* small screens: stack cleanly */
@media (max-width: 560px) {
  .footer-area-2 .footer-widget-wrapper {
    grid-template-columns: 1fr;          /* single centered column */
    gap: 12px 0;
  }
}



/* keep your existing .featured-work-box styles; this augments them */
.featured-work-box .image.is-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;              /* modern browsers */
  background: #000;
}

/* fallback if you need it:
.featured-work-box .image.is-video::before {
  content: "";
  display: block;
  padding-top: 56.25%;  /* 16:9 */
}
.featured-work-box .image.is-video > * { position: absolute; inset: 0; }
*/

.fw-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button */
.fw-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, opacity .2s ease;
}
.fw-play:hover { transform: scale(1.04); }

.fw-play::before {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #111; /* triangle */
  margin-left: 4px;
}

/* Hide play overlay while playing */
.image.is-video.is-playing .fw-play {
  opacity: 0;
  pointer-events: none;
}

/* --- Logo Drawer --- */
.logo-drawer {
  display: grid;
  place-items: center;
  margin-top: clamp(20px, 5vh, 60px);
}

.logo-stage {
  /* Go BIGGER: full hero feel */
  width: min(90vw, 1200px);          /* max width bumped from 950px to 1200px */
  height: clamp(200px, 25vh, 300px); /* taller for stronger visual presence */
  display: grid;
  place-items: center;
  color: #fff;
}

.logo-stage svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Make sure stroke renders above fill and stays crisp */
.logo-stage svg * {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill; /* stroke on top of fill */
  shape-rendering: geometricPrecision;
}

@media (prefers-reduced-motion: reduce) {
  .logo-stage {
    transition: none !important;
  }
}


:root{
    --pv-x: -9999px;
    --pv-y: -9999px;
    --pv-rot: 0deg;
    --pv-scale: .94;
    --pv-img-x: 0px;
    --pv-img-y: 0px;
  }

  /* ===== HEADLINE ===== */
  .hero-headline{
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 8vw, 7rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #fff;
  }
  .brand-word{
    position: relative;
    cursor: pointer;
    background: linear-gradient(currentColor,currentColor) bottom left/100% 0.08em no-repeat;
    text-underline-offset: .2em;
    transition: background-size .22s ease;
  }
  .brand-word:hover{ background-size: 100% .18em; }

  /* ===== FLOATING PREVIEW — spring-free (lerp) ===== */
  .brand-preview{
    position: fixed;
    left: 0; top: 0;
    width: 360px; height: 202.5px; /* 16:9 */
    overflow: hidden;
    pointer-events: none;   /* only the play button is clickable */
    opacity: 0;
    transform: translate(var(--pv-x), var(--pv-y)) translate(-50%,-50%)
               rotate(var(--pv-rot)) scale(var(--pv-scale)) translateZ(0.001px);
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    filter: drop-shadow(0 16px 48px rgba(0,0,0,.55));
    z-index: 9998;
    transition: opacity .12s linear;  /* fade only; motion is JS-driven */
  }
  .brand-preview.show{ opacity: 1; }

  .brand-preview img{
    width: 104%; height: 104%;
    position: absolute; left: -2%; top: -2%;
    object-fit: cover; display: block;
    transform: translate(var(--pv-img-x), var(--pv-img-y));
    will-change: transform;
    transition: filter .18s ease;
    filter: contrast(1.06) saturate(1.08);
  }
  .brand-preview .play{
    position: absolute; inset: 0; margin: auto;
    width: 66px; height: 66px; border-radius: 50%;
    border: none; outline: none;
    background: rgba(0,0,0,.62);
    color: #fff; font-size: 24px; line-height: 66px; text-align: center;
    cursor: pointer; pointer-events: auto;
    backdrop-filter: blur(2px);
    transition: transform .16s ease, background-color .16s ease;
  }
  .brand-preview .play:hover{ transform: scale(1.08); background: rgba(0,0,0,.72); }

  /* ===== MODAL (true fixed popup) ===== */
  .video-modal{
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
    padding: min(4vh, 40px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .video-modal[aria-hidden="false"]{ opacity: 1; pointer-events: auto; }

  .modal-inner{
    width: min(96vw, 1100px);
    aspect-ratio: 16 / 9;
    position: relative;
    transform: scale(.94) translateY(8px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
  }
  .video-modal[aria-hidden="false"] .modal-inner{ transform: none; opacity: 1; }

  .video-modal video,
  .video-modal iframe{
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .video-modal .close{
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.6); color: #fff;
    font-size: 20px; cursor: pointer;
  }

  /* Body lock */
  body.is-locked{
    position: fixed; inset: 0; width: 100%;
    overflow: hidden; touch-action: none;
  }

  @media (prefers-reduced-motion: reduce){
    .brand-preview, .video-modal, .modal-inner{ transition: none; }
  }

  /* === Glitch fade (no movement) === */
  .brand-preview.glitch{
    animation: glitchFade 220ms steps(6, end);
  }
  .brand-preview.glitch img{
    animation: glitchImg 220ms steps(6, end);
  }
  @keyframes glitchFade{
    0%   { opacity: 0; filter: contrast(1.6) saturate(1.4); }
    40%  { opacity: 1; }
    55%  { opacity: .45; }
    70%  { opacity: 1; }
    85%  { opacity: .65; }
    100% { opacity: 1; filter: contrast(1.06) saturate(1.08); }
  }
  @keyframes glitchImg{
    0%   { transform: translate(var(--pv-img-x), var(--pv-img-y)) translate3d(0,0,0); }
    35%  { transform: translate(var(--pv-img-x), var(--pv-img-y)) translate3d(1px,-1px,0); }
    60%  { transform: translate(var(--pv-img-x), var(--pv-img-y)) translate3d(-1px,1px,0); }
    100% { transform: translate(var(--pv-img-x), var(--pv-img-y)) translate3d(0,0,0); }
  }




  /* hide fixed UI when footer is in view */
.bz-left-badge.is-over-footer,
.bz-socials.is-over-footer{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-6px); /* tiny nudge so it feels intentional */
  transition: opacity .25s ease, transform .25s ease;
}

.image-wrapper.cta-parallax {
  position: relative;
  height: 50vh;                /* smaller height (adjust as needed) */
  overflow: hidden;
}

.image-wrapper.cta-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

/* overlay centers content */
.cta-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centers vertically */
  align-items: center;       /* centers horizontally */
  text-align: center;
  z-index: 2;
  color: #fff;
  padding: 0 2rem;
}

/* spacing and button */
.cta-title {
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.cta-button {
  display: inline-block;
  background: #fff;
  color: #111;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  transition: all .3s ease;
}

.cta-button:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px);
}

/* responsive */
@media (max-width: 768px) {
  .image-wrapper.cta-parallax {
    height: 40vh;
  }
  .cta-title {
    font-size: 2rem;
  }
}

/* basic dropdown for Discover */
.main-menu > ul > li.has-dropdown {
  position: relative;
}

.main-menu > ul > li .simple-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  display: none;
  z-index: 9999; /* sit above glass bar + bg stuff */
  border-radius: 14px;
  padding: 10px 0;
}

.main-menu > ul > li .simple-dropdown li {
  list-style: none;
}

.main-menu > ul > li .simple-dropdown li a {
  display: block;
  padding: 8px 16px;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: .04em;
  text-transform: none;
  transition: background .15s ease, padding .15s ease;
  white-space: nowrap;
}

.main-menu > ul > li .simple-dropdown li a:hover {
  background: rgba(255,255,255,0.07);
  padding-left: 20px;
}

/* show on hover */
.main-menu > ul > li.has-dropdown:hover > .simple-dropdown {
  display: block;
}

/* === FIX: let dropdown escape the glass bar === */
.header-main.glass-bar {
  overflow: visible !important;   /* was hidden */
  position: relative;
  z-index: 1000;
}

/* make sure the LI can position the dropdown */
.main-menu > ul > li.has-dropdown {
  position: relative;
  z-index: 1001;
}

/* show it on hover, force it */
.main-menu > ul > li.has-dropdown:hover > .simple-dropdown {
  display: block !important;
}

/* keep dropdown above floating stuff */
.simple-dropdown {
  z-index: 99999;
}

/* Stop horizontal scroll on the root */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;         /* modern; hides overflow without creating a scrollable area */
  /* fallback for older browsers */
  /* overflow-x: hidden; */
  overscroll-behavior-x: none;
  touch-action: pan-y;      /* mobile: allow vertical, block horizontal */
}


.work-box .card {
  background-color: #111111 !important;
}

@media (max-width: 768px) {
  .bz-socials {
    display: none !important;        /* 👈 hide completely on mobile */
    pointer-events: none;
  }
}
@media (max-width: 768px) {
  .bz-left-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .section-title.rr_title_anim {
    font-size: 3rem !important;   /* adjust to your taste */
    line-height: 1.15;
  }
}

@media (max-width: 480px) {
  .section-title.rr_title_anim {
    font-size: 2.4rem !important;
    line-height: 1.2;
  }
}

@media (max-width: 768px) {

  /* make the whole logo box bigger */
  .client-area-page-about .swiper-slide .client-box {
    transform: scale(1.3);
    transform-origin: center center;
  }

  /* make sure the slide centers the logo */
  .client-area-page-about .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* directly force the image size */
  .client-area-page-about .clients-wrapper-box .client-box img {
    width: 130px !important;
    height: auto !important;
    max-width: none !important;
  }

  /* let the wrapper breathe on mobile */
  .client-area-page-about .clients-wrapper-box {
    width: 100% !important;
    
  }
}

@media (max-width: 480px) {
  .client-area-page-about .swiper-slide .client-box {
    transform: scale(1.45);
    
  }
}

@media (max-width: 768px) {

  /* Increase space between slides */
  .client-area-page-about .swiper-slide {
    margin-right: 90px !important;   /* adjust to taste */
  }

  /* Also give some breathing room top/bottom */
  .client-area-page-about .client-box {
    padding: 50px 0 !important;
  }

}

@media (max-width: 900px) {
  /* stack the work cards in a single column */
  .work-area-work-page .works-wrapper-6 {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* kill the fixed 830px width / 600px height on mobile */
  .work-area-work-page .work-box .thumb {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    overflow: hidden;
  }

  /* make inner image/video actually fill the thumb */
  .work-area-work-page .work-box .thumb .image,
  .work-area-work-page .work-box .thumb video {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* small padding fix so they don't hug the edges */
  .work-area-work-page .container.large {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* mobile spacing between portfolio grid and white section */
@media (max-width: 900px) {

  /* give the whole portfolio section a little breathing room */
  .work-area-work-page {
    padding-bottom: 40px;
  }

  /* extra space under the last card */
  .work-area-work-page .works-wrapper-6 .work-box:last-child {
    margin-bottom: 32px;
  }

  /* soften the top edge of the white section */
  .service-area .light-zone.service-content-wrapper {
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  .copyright-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px; /* clean spacing between items */
    width: 100%;
  }

  .copyright-text .label-left,
  .copyright-text .label-right {
    display: block;
    width: 100%;
    line-height: 1.4;
    white-space: normal !important; /* prevent them from merging */
  }

  .copyright-text .label-left {
    margin-bottom: 4px;
  }

  .copyright-text img {
    margin-top: 10px;
    max-width: 240px;
    height: auto;
  }
}

@media (max-width: 768px) {

  /* Stack the two footer rows + center everything */
  .copyright-area-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  /* Stack the two labels + logo */
  .copyright-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    width: 100%;
  }

  /* Kill the absolute positioning from other uses of .rotating-text */
  .copyright-text .rotating-text {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0;
    display: block;
  }

  .copyright-text .label-left,
  .copyright-text .label-right {
    align-items: center !important;
    display: block;
    width: 100%;
    white-space: normal;
    line-height: 1.4;
  }

  .copyright-text img {
    margin-top: 10px;
    max-width: 590px;
    height: auto;
  }

  /* Make sure marquee sits under the logo, full-width */
  .footer-marquee {
    width: 100%;
    order: 2;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {

  /* Center the whole footer block */
  .copyright-area-inner {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
  }

  /* Center each item inside the text stack */
  .copyright-text {
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    gap: 8px;
  }

  /* Ensure BOTH text lines are centered */
  .copyright-text .label-left,
  .copyright-text .label-right,
  .copyright-text .rotating-text {
    text-align: center !important;
    width: 100%;
    margin: 0 auto;
  }

  /* Ensure the logo stays centered */
  .copyright-text img {
    margin: 10px auto 0 auto !important;
    display: block;
  }
}


/* MOBILE HERO VERTICAL ALIGNMENT */
@media (max-width: 768px) {

  /* Make the hero area fill the screen and center its contents */
  .hero-area-2-inner {
    min-height: calc(50vh - 120px); /* adjust 120px based on header height */
  
  }

  /* Pull the headline block up just a bit so it's slightly above dead center */
  .hero-area-2-inner .section-header {
    margin-top: -40px; /* tweak: -20 / -60 depending how high you want it */
  }
}


/* Hide custom cursor on mobile */
@media (max-width: 768px) {
  .cursor {
    display: none !important;
  }
}

/* ===== ABOUT PAGE TITLE – MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {

  .page-title-area {
    
    position: relative;
    min-height: 70vh;                 /* give it a real hero height */
    padding: 110px 1.5rem 70px;       /* clear the header, add bottom space */
    display: flex;
    align-items: center;              /* vertical centering for the title */
    justify-content: center;
    overflow: hidden;
  }

  .page-title-area .container.large {
    width: 100%;
  }

  .page-title-area-inner.page-title-center {
    top: -100px;
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .page-title-area-inner .page-title-wrapper {
    width: 100%;
  }

  .page-title-area-inner .page-title {
    font-size: 2rem !important;       /* was 6rem – shrink for mobile */
    line-height: 1.05;
    letter-spacing: 0.18em !important;
    word-spacing: 0.15em;
  }

  /* HUD console – shrink + center top */
  .page-title-area .hud-console {
    display: none;
    position: absolute;
    top: 200px;
    left: 44%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    font-size: 0.65rem;
    line-height: 1.4;
    padding: 10px 12px;
   
    border-radius: 6px;
  }

  /* Right-side status block – hide on mobile to reduce clutter */
  .page-title-area .hud-right {
    display: none;
  }
}

@media (max-width: 768px) {

  /* ===== HUD TEXT CONTROLS ===== */
  .page-title-area .hud-console {
    font-size: 0.01rem;          /* <<< adjust this */
    line-height: 1.45;           /* <<< adjust tighter/looser */
    letter-spacing: 0.03em;      /* <<< techy spacing */
    font-weight: 400;            /* 300–500 works best */
  }

  .page-title-area .hud-console .hud-header {
    font-size: 0.95rem;          /* slightly larger title */
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.06em;
  }

  .page-title-area .hud-console .hud-body {
    font-size: 0.80rem;          /* body lines */
    white-space: pre-line;
  }

}

/* ===========================
   MOBILE OPTIMIZATION
   (NO HTML CHANGES)
   =========================== */

@media (max-width: 768px) {

  .cta-overlay {
    padding: 2rem 1.2rem;
    gap: 1rem;
  }

  .cta-title {
    font-size: 2.2rem !important;   /* down from 4rem */
    line-height: 1.15;
    letter-spacing: 2px;
  }

  .cta-button {
    font-size: 0.9rem !important;
    padding: 0.9rem 1.6rem;
    width: 100%;                    /* full-width button for mobile polish */
    max-width: 320px;               /* doesn’t get too long */
    margin: 0 auto;                 /* center it */
  }
}

/* Ultra-small devices (iPhone SE, older Android) */
@media (max-width: 480px) {

  .cta-title {
    font-size: 1.8rem !important;
  }

  .cta-button {
    font-size: 0.85rem !important;
    padding: 0.8rem 1.4rem;
  }
}
 

/* MOBILE: make astronaut hero truly flush to the top */
@media (max-width: 768px) {

  /* 1. Section sits directly under header, no extra gap */
  .page-title-area {
    margin-top: 0 !important;                       /* no extra offset */
    height: calc(100vh - 80px) !important;          /* 80px ≈ header height – tweak if needed */
    background-position: center top !important;     /* anchor image to the very top */
  }

  /* 2. Kill the template's "section-spacing-top" padding */
  .page-title-area-inner.section-spacing-top {
    padding-top: 0 !important;
  }

  /* 3. Keep the title from colliding with the header */
  .page-title-center {
    margin-top: 110px !important;  /* adjust 90–130px until it feels right */
  }
}

.bzvideo-wrapper {
  width: 600px;          /* whatever size you want visible */
  height: 200px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;      /* actually crops the borders */
}

.bzlogos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101%;           /* small zoom to hide the black edge */
  height: auto;
  transform: translate(-50%, -50%);  /* keeps it centered */
  object-fit: cover;
}
  /* Hide ALL default UI elements */
  #bzLogo3D::part(default-progress-bar) { display:none; }
  #bzLogo3D::part(controls) { display:none; }
  #bzLogo3D::part(ar-button) { display:none; }

/* MOBILE */
@media (max-width: 768px) {
  .bzvideo-wrapper {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .bzvideo-wrapper video {
    position: static !important;       /* <-- critical reset */
    top: auto !important;
    left: auto !important;
    transform: none !important;        /* <-- removes absolute centering */
    
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    max-height: 300px !important;      /* adjust */
  }
}

/* MOBILE LAYOUT FIXES */
@media (max-width: 768px) {

  /* Make each work card a centered block with a max width */
  .works-wrapper-6 .work-box {
    margin-right: 40px !important;
    max-width: 420px;
    margin: 0 auto 2.5rem;
  }

  /* Fix the huge inline 830x600 on mobile */
  .works-wrapper-6 .thumb {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 1rem !important;
    overflow: hidden;
    border-radius: 16px; /* optional, just looks nicer with your rounded look */
  }

  .works-wrapper-6 .thumb video,
  .works-wrapper-6 .thumb img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Center all text */
  .works-wrapper-6 .content,
  .works-wrapper-6 .content .title,
  .works-wrapper-6 .content .title a {
    text-align: center;
  }

  /* Scale titles down so they don’t run off screen */
  .works-wrapper-6 .content .title a {
    font-size: 1.4rem !important;
    line-height: 1.2;
    word-wrap: break-word;
  }

  /* Tags: wrap + center + smaller */
  .works-wrapper-6 .meta.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.6rem;
    margin-top: 0.6rem;
  }

  .works-wrapper-6 .meta.tags .tag {
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  .works-wrapper-6 .meta.tags .tag img {
    max-width: 22px !important;
    margin-right: 6px;
  }
}


/* ===== Make hero full screen ===== */
.page-title-area {
  height: 10vh !important;
  min-height: 600px;
  margin-top: 0 !important;
}

/* ===== Title mobile scaling ===== */
@media (max-width: 768px) {
  .page-title-area .page-title {
    font-size: 1.7rem !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
  }

  .page-title-center {
    margin-top: 80px !important;
  }

  /* HUD console adjustment */
  .hud-console {
    top: 120px !important;
    left: 20px !important;
    width: 260px !important;
    transform: scale(.85);
  }
}

/* Default Desktop (unchanged) */
#preloader {
  position: fixed;
  inset: 0;
  background: #090909;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#preloader-video {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* MOBILE: Force full-screen fill with zoom if needed */
@media (max-width: 768px) {

  #preloader {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    z-index: 9999;
  }

  #preloader-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140% !important;  /* zoom into it, adjust this */
    height: auto !important;
    transform: translate(-50%, -50%);
    object-fit: cover !important;   /* allows zoom + crop */
  }
}