/* Colors */
@font-face {
  font-family: "SequelLightBody";
  src: url("../fonts/Sequel-Sans-Light-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-Light-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-Light-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelRomanBody";
  src: url("../fonts/Sequel-Sans-Roman-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-Roman-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-Roman-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelRomanHead";
  src: url("../fonts/Sequel-Sans-Roman-Head.ttf") format("truetype"), url("../fonts/Sequel-Sans-Roman-Head.woff2") format("woff2"), url("../fonts/Sequel-Sans-Roman-Head.woff") format("woff"); }
@font-face {
  font-family: "SequelMediumBody";
  src: url("../fonts/Sequel-Sans-Medium-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-Medium-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-Medium-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelMediumDisp";
  src: url("../fonts/Sequel-Sans-Medium-Disp.ttf") format("truetype"), url("../fonts/sequel_sans_medium_disp-webfont.woff2") format("woff2"), url("../fonts/sequel_sans_medium_disp-webfont.woff") format("woff"); }
@font-face {
  font-family: "SequelMediumHead";
  src: url("../fonts/Sequel-Sans-Medium-Head.ttf") format("truetype"), url("../fonts/Sequel-Sans-Medium-Head.woff2") format("woff2"), url("../fonts/Sequel-Sans-Medium-Head.woff") format("woff"); }
@font-face {
  font-family: "SequelSemiBoldBody";
  src: url("../fonts/Sequel-Sans-SemiBold-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-SemiBold-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-SemiBold-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelBoldBody";
  src: url("../fonts/Sequel-Sans-Bold-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-Bold-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-Bold-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelBoldDisp";
  src: url("../fonts/Sequel-Sans-Bold-Disp.ttf") format("truetype"), url("../fonts/Sequel-Sans-Bold-Disp.woff2") format("woff2"), url("../fonts/Sequel-Sans-Bold-Disp.woff") format("woff"); }
@font-face {
  font-family: "SequelHeavyDisp";
  src: url("../fonts/Sequel-Sans-Heavy-Disp.ttf") format("truetype"), url("../fonts/Sequel-Sans-Heavy-Disp.woff2") format("woff2"), url("../fonts/Sequel-Sans-Heavy-Disp.woff") format("woff"); }
@font-face {
  font-family: "SequelHeavyBody";
  src: url("../fonts/Sequel-Sans-Heavy-Body.ttf") format("truetype"), url("../fonts/Sequel-Sans-Heavy-Body.woff2") format("woff2"), url("../fonts/Sequel-Sans-Heavy-Body.woff") format("woff"); }
@font-face {
  font-family: "SequelBlackHead";
  src: url("../fonts/Sequel-Sans-Black-Head.ttf") format("truetype"), url("../fonts/Sequel-Sans-Black-Head.woff2") format("woff2"), url("../fonts/Sequel-Sans-Black-Head.woff") format("woff"); }
/* fonts */
/* transitions */
/* =============== Media Queries =============== */
* {
  padding: 0;
  margin: 0; }

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 0px; }

input[type=text]:focus, input {
  outline: 0px;
  box-shadow: 0px; }

a:hover {
  text-decoration: none; }

a:actvie, a:focus {
  box-shadow: none;
  outline: 0px; }

html {
  cursor: url("../image/cursor.png") 12 12, auto !important;
  cursor: -webkit-image-set(url("../image/cursor.png") 1x, url("../image/cursor@2x.png") 2x) 12 12, auto !important; }

button, label, input, a {
  cursor: url("../image/cursor-20.png") 12 12, auto !important;
  cursor: -webkit-image-set(url("../image/cursor-20.png") 1x, url("../image/cursor-20@2x.png") 2x) 12 12, auto !important; }

body {
  font-family: "SequelRomanBody", sans-serif;
  font-size: 16px;
  position: relative;
  color: #000000; }
  body.openMenu {
    overflow: hidden; }

@media only screen and (min-width: 992px) {
  .container {
    max-width: 1920px;
    margin: auto;
    padding: 0 5.208vw; } }
@media only screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 40px; } }
@media only screen and (max-width: 640px) {
  .container {
    padding: 0 6.250vw; } }
input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0 1.302vw;
  width: 100%; }
  @media only screen and (max-width: 991px) {
    input[type=range] {
      margin: 0 20px; } }
  @media only screen and (max-width: 640px) {
    input[type=range] {
      margin: 0 3.125vw; } }
  input[type=range]:focus {
    outline: none; }

input[type=range]:focus {
  outline: none; }

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.104vw;
  background: #3071a9;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-webkit-slider-runnable-track {
      height: 3px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-webkit-slider-runnable-track {
      height: 0.156vw; } }

input[type=range]::-webkit-slider-thumb {
  border-radius: 50%;
  background: #444444;
  position: relative;
  -webkit-appearance: none;
  border: 0.156vw solid #F6F6F6;
  box-shadow: 0 0 0.104vw 0.052vw #C8C8C8;
  height: 2.083vw;
  width: 2.083vw;
  top: -0.990vw; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-webkit-slider-thumb {
      border: 3px solid #F6F6F6;
      box-shadow: 0 0 2px 2px #C8C8C8;
      height: 40px;
      width: 40px;
      top: -20px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-webkit-slider-thumb {
      border: 0.469vw solid #F6F6F6;
      box-shadow: 0 0 0.313vw 0.313vw #C8C8C8;
      height: 6.250vw;
      width: 6.250vw;
      top: -3.125vw; } }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #3071a9;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.104vw;
  background: #3071a9; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-moz-range-track {
      height: 3px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-moz-range-track {
      height: 0.156vw; } }

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 2.083vw;
  width: 2.083vw;
  border-radius: 50%;
  background: #444444;
  top: -0.990vw;
  border: 0.156vw solid #F6F6F6;
  box-shadow: 0 0 0.104vw 0.052vw #C8C8C8; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-moz-range-thumb {
      border: 3px solid #F6F6F6;
      box-shadow: 0 0 2px 2px #C8C8C8;
      height: 40px;
      width: 40px;
      top: -20px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-moz-range-thumb {
      border: 0.469vw solid #F6F6F6;
      box-shadow: 0 0 0.313vw 0.313vw #C8C8C8;
      height: 6.250vw;
      width: 6.250vw;
      top: -3.125vw; } }

input[type=range]::-ms-track {
  width: 100%;
  height: 0.104vw;
  background: #3071a9; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-ms-track {
      height: 3px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-ms-track {
      height: 0.156vw; } }

input[type=range]::-ms-fill-lower {
  background: green; }

input[type=range]::-ms-fill-upper {
  background: red; }

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 2.083vw;
  width: 2.083vw;
  border-radius: 50%;
  background: #444444;
  top: -0.990vw;
  border: 0.156vw solid #F6F6F6;
  box-shadow: 0 0 0.104vw 0.052vw #C8C8C8; }
  @media only screen and (max-width: 991px) {
    input[type=range]::-ms-thumb {
      border: 3px solid #F6F6F6;
      box-shadow: 0 0 2px 2px #C8C8C8;
      height: 40px;
      width: 40px;
      top: -20px; } }
  @media only screen and (max-width: 640px) {
    input[type=range]::-ms-thumb {
      border: 0.469vw solid #F6F6F6;
      box-shadow: 0 0 0.313vw 0.313vw #C8C8C8;
      height: 6.250vw;
      width: 6.250vw;
      top: -3.125vw; } }

input[type=range]:focus::-ms-fill-lower {
  background: green; }

input[type=range]:focus::-ms-fill-upper {
  background: red; }

/* popup css start */
.popupWrapper .modal-dialog {
  max-width: 59.010vw;
  margin: 5vw auto;
  border-radius: 0.521vw; }
  @media only screen and (max-width: 991px) {
    .popupWrapper .modal-dialog {
      max-width: none;
      margin: 126px 29px 126px;
      border-radius: 10px; } }
  @media only screen and (max-width: 640px) {
    .popupWrapper .modal-dialog {
      margin: 19.688vw 4.531vw 19.688vw;
      border-radius: 1.563vw; } }
  .popupWrapper .modal-dialog .modal-content {
    position: relative;
    background-color: transparent;
    padding: 4.688vw 0; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .modal-content {
        padding: 50px 0 58px; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .modal-content {
        padding: 7.813vw 0 9.063vw; } }
    .popupWrapper .modal-dialog .modal-content::before {
      position: absolute;
      content: '';
      height: 100%;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.24);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      z-index: -1;
      border-radius: 0.521vw; }
      @media only screen and (max-width: 991px) {
        .popupWrapper .modal-dialog .modal-content::before {
          border-radius: 10px; } }
      @media only screen and (max-width: 640px) {
        .popupWrapper .modal-dialog .modal-content::before {
          border-radius: 1.563vw; } }
  .popupWrapper .modal-dialog .logoWrapper {
    max-width: 15vw;
    margin: 0 auto; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .logoWrapper {
        max-width: 288px; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .logoWrapper {
        max-width: 45vw; } }
  .popupWrapper .modal-dialog .modalTitel {
    font-size: 3.646vw;
    line-height: 5.469vw;
    margin: 2.292vw 0 0.677vw; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .modalTitel {
        font-size: 60px;
        line-height: 65px;
        margin: 97px auto 47px;
        max-width: 474px; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .modalTitel {
        font-size: 9.375vw;
        line-height: 10.156vw;
        margin: 15.156vw auto 7.344vw;
        max-width: 74.063vw; } }
  .popupWrapper .modal-dialog .modalText {
    font-size: 1.719vw;
    line-height: 1.927vw; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .modalText {
        font-size: 30px;
        line-height: 37px;
        max-width: 458px;
        margin: 0 auto; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .modalText {
        font-size: 4.688vw;
        line-height: 5.781vw;
        max-width: 71.563vw; } }
  .popupWrapper .modal-dialog .popupBtn {
    margin: 4.375vw 0 1.979vw;
    padding: 1.510vw 2.813vw;
    background-color: #E7C434;
    font-family: "SequelMediumBody", sans-serif;
    font-size: 1.016vw;
    line-height: 1.146vw; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .popupBtn {
        margin: 68px 0 56px;
        padding: 35px 107px;
        font-size: 23.4px;
        line-height: 28px;
        border-radius: 4.68px; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .popupBtn {
        margin: 10.625vw 0 8.750vw;
        padding: 5.469vw 16.719vw;
        font-size: 3.656vw;
        line-height: 4.375vw;
        border-radius: 0.731vw; } }
  .popupWrapper .modal-dialog .cancelText {
    text-decoration: underline;
    font-size: 1.042vw;
    line-height: 1.927vw;
    letter-spacing: 0.047vw; }
    @media only screen and (max-width: 991px) {
      .popupWrapper .modal-dialog .cancelText {
        font-size: 30px;
        line-height: 37px;
        letter-spacing: 1.35px; } }
    @media only screen and (max-width: 640px) {
      .popupWrapper .modal-dialog .cancelText {
        font-size: 4.688vw;
        line-height: 5.781vw;
        letter-spacing: 0.211vw; } }

.modal-backdrop.show {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.51);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); }

/* popup css end */
@media only screen and (max-width: 991px) {
  .customHeader {
    position: static; } }

.blue-bg {
  background-color: #1D27C1; }

.black-bg {
  background-color: #000000; }

.title h2 {
  font-family: "SequelMediumHead", sans-serif;
  font-size: 2.604vw;
  line-height: 3.490vw;
  margin-bottom: 1.563vw; }
  @media only screen and (max-width: 991px) {
    .title h2 {
      font-size: 45px;
      line-height: 60px;
      margin-bottom: 21px; } }
  @media only screen and (max-width: 640px) {
    .title h2 {
      font-size: 7.031vw;
      line-height: 9.375vw;
      margin-bottom: 3.281vw; } }
  .title h2 .boldFont {
    font-family: "SequelBoldBody", sans-serif; }
.title p {
  font-family: "SequelLightBody", sans-serif;
  font-size: 1.458vw;
  line-height: 1.875vw; }
  @media only screen and (max-width: 991px) {
    .title p {
      font-size: 28px;
      line-height: 36px; } }
  @media only screen and (max-width: 640px) {
    .title p {
      font-size: 4.375vw;
      line-height: 5.625vw; } }
.title.white h2, .title.white p {
  color: #ffffff; }

.btn-them {
  display: inline-block;
  padding: 0.682vw 1.580vw;
  font-size: 0.938vw;
  line-height: normal;
  text-transform: uppercase;
  position: relative;
  transition: 0.2s all ease-in-out;
  -webkit-transition: 0.2s all ease-in-out;
  -moz-transition: 0.2s all ease-in-out;
  -ms-transition: 0.2s all ease-in-out;
  -o-transition: 0.2s all ease-in-out; }
  .btn-them.btn-rounded {
    border-radius: 25px; }
  .btn-them.btn-square {
    border-radius: 3px; }
  .btn-them.btn-green {
    background-color: #7BCABB;
    color: #ffffff; }
    .btn-them.btn-green:hover {
      color: #000000; }
  .btn-them.btn-white {
    background-color: #ffffff;
    color: #000000; }
    .btn-them.btn-white:hover {
      color: #000000; }
  .btn-them.btn-yellow {
    background-color: #F3E074;
    color: #000000; }
    .btn-them.btn-yellow:hover {
      color: #000000; }
  .btn-them[ripple] {
    position: relative;
    overflow: hidden;
    z-index: 1; }
    .btn-them[ripple] .ripple-effect {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      transform: translate3d(-50%, -50%, 0);
      z-index: -1; }
  .btn-them.btn-outline-yellow {
    border: 3px solid #F1D63C;
    border-radius: 3px; }
    .btn-them.btn-outline-yellow svg path {
      fill: #ffffff; }
  .btn-them.icon-left svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg); }

.parallax-window {
  width: 100%;
  min-height: 37.448vw;
  background: transparent; }

body.hiddenScroll {
  overflow: hidden; }

#loading {
  width: 100%;
  height: 100%;
  color: #000;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  will-change: transform;
  -moz-transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s; }

#loading.finished {
  transition: none; }

#loading #loading-text {
  width: 100%;
  opacity: 0;
  color: #fff;
  padding: 0 20px;
  font-size: 1.875em;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  position: absolute;
  font-family: "SequelBoldBody", sans-serif;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 999999;
  will-change: transform;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%); }

@media (min-width: 601px) {
  #loading #loading-text {
    font-size: 2.5em; } }
#loading.active #loading-text {
  opacity: 1;
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s; }

#loading.initial #loading-text.show {
  opacity: 1;
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s; }

.ldg-Bar {
  width: calc(20vw + 1px);
  height: 100vh;
  display: block;
  position: absolute;
  bottom: 100%;
  background: #000000;
  -moz-transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); }

#loading.initial .ldg-Bar {
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%); }

#loading.active .ldg-Bar {
  -moz-transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%); }

.ldg-Bar-1 {
  left: 0%;
  -moz-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s; }

#loading.active .ldg-Bar-1 {
  -moz-transition-delay: 0.03s;
  -webkit-transition-delay: 0.03s;
  transition-delay: 0.03s; }

.ldg-Bar-2 {
  left: 20%;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s; }

#loading.active .ldg-Bar-2 {
  -moz-transition-delay: 0.06s;
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s; }

.ldg-Bar-3 {
  left: 40%;
  -moz-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s; }

#loading.active .ldg-Bar-3 {
  -moz-transition-delay: 0.09s;
  -webkit-transition-delay: 0.09s;
  transition-delay: 0.09s; }

.ldg-Bar-4 {
  left: 60%;
  -moz-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s; }

#loading.active .ldg-Bar-4 {
  -moz-transition-delay: 0.12s;
  -webkit-transition-delay: 0.12s;
  transition-delay: 0.12s; }

.ldg-Bar-5 {
  left: 80%;
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s; }

#loading.active .ldg-Bar-5 {
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s; }

.fadein {
  opacity: 0;
  top: 75px;
  position: relative;
  -moz-transition: opacity 0.7s ease, top 0.8s ease;
  -webkit-transition: opacity 0.7s ease, top 0.8s ease;
  transition: opacity 0.7s ease, top 0.8s ease; }

.fadedin {
  opacity: 1;
  top: 0; }

.header-blue .customHeader {
  background-color: #1d27c1;
  position: relative; }

.customHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2.083vw 0;
  z-index: 999; }
  @media only screen and (max-width: 991px) {
    .customHeader {
      padding: 41px 0;
      position: absolute; } }
  @media only screen and (max-width: 640px) {
    .customHeader {
      padding: 6.406vw 0; } }
  .customHeader .menu_content {
    min-height: 4.479vw; }
    @media only screen and (max-width: 991px) {
      .customHeader .menu_content {
        min-height: auto; } }
  .customHeader .logo {
    position: relative; }
    .customHeader .logo .logo-text {
      max-width: 16.823vw;
      position: relative;
      transition: 0.2s all ease-in-out;
      -webkit-transition: 0.2s all ease-in-out;
      -moz-transition: 0.2s all ease-in-out;
      -ms-transition: 0.2s all ease-in-out;
      -o-transition: 0.2s all ease-in-out; }
      @media screen and (max-width: 991px) {
        .customHeader .logo .logo-text {
          display: none !important; } }
      .customHeader .logo .logo-text.open {
        max-width: 16.823vw;
        opacity: 1; }
      .customHeader .logo .logo-text.remove {
        opacity: 0; }
    .customHeader .logo .logo-img {
      height: 4.479vw;
      width: 4.479vw;
      transition: 0.2s transform ease-in-out;
      -webkit-transition: 0.2s transform ease-in-out;
      -moz-transition: 0.2s transform ease-in-out;
      -ms-transition: 0.2s transform ease-in-out;
      -o-transition: 0.2s transform ease-in-out; }
      @media screen and (max-width: 991px) {
        .customHeader .logo .logo-img.white {
          display: block !important;
          width: 86px;
          height: auto; } }
      @media only screen and (max-width: 640px) {
        .customHeader .logo .logo-img.white {
          width: 13.438vw; } }
      .customHeader .logo .logo-img.removeEffect {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg); }
        @media screen and (max-width: 991px) {
          .customHeader .logo .logo-img.removeEffect {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg); } }
      .customHeader .logo .logo-img.white {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg); }
        @media only screen and (max-width: 991px) {
          .customHeader .logo .logo-img.white {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg); } }
      .customHeader .logo .logo-img.effect {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg); }
      .customHeader .logo .logo-img.blue {
        display: none; }
    .customHeader .logo .blue .logo-img.white {
      display: none !important; }
    .customHeader .logo .blue .logo-img.blue {
      display: block; }
  .customHeader .menu {
    position: relative;
    z-index: 999; }
    .customHeader .menu .hemburg {
      display: none;
      width: 38px;
      height: 24px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: 0.6s all ease-in-out;
      -webkit-transition: 0.6s all ease-in-out;
      -moz-transition: 0.6s all ease-in-out;
      -ms-transition: 0.6s all ease-in-out;
      -o-transition: 0.6s all ease-in-out;
      cursor: pointer; }
      @media screen and (max-width: 991px) {
        .customHeader .menu .hemburg {
          display: block;
          position: relative;
          z-index: 3; } }
      @media only screen and (max-width: 640px) {
        .customHeader .menu .hemburg {
          width: 5.938vw;
          height: 3.750vw; } }
      .customHeader .menu .hemburg span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: 0.3s all ease-in-out;
        -webkit-transition: 0.3s all ease-in-out;
        -moz-transition: 0.3s all ease-in-out;
        -ms-transition: 0.3s all ease-in-out;
        -o-transition: 0.3s all ease-in-out; }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .hemburg span {
            height: 0.313vw; } }
        .customHeader .menu .hemburg span:nth-child(1) {
          top: 0px;
          -webkit-transform-origin: left center;
          -moz-transform-origin: left center;
          -o-transform-origin: left center;
          transform-origin: left center; }
        .customHeader .menu .hemburg span:nth-child(2) {
          top: 10px;
          left: auto;
          right: 0;
          width: 60%;
          -webkit-transform-origin: left center;
          -moz-transform-origin: left center;
          -o-transform-origin: left center;
          transform-origin: left center; }
          @media only screen and (max-width: 640px) {
            .customHeader .menu .hemburg span:nth-child(2) {
              top: 1.563vw; } }
        .customHeader .menu .hemburg span:nth-child(3) {
          top: 22px;
          -webkit-transform-origin: right center;
          -moz-transform-origin: right center;
          -o-transform-origin: right center;
          transform-origin: right center; }
          @media only screen and (max-width: 640px) {
            .customHeader .menu .hemburg span:nth-child(3) {
              top: 3.438vw; } }
      .customHeader .menu .hemburg.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -3px;
        left: 8px; }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .hemburg.open span:nth-child(1) {
            top: -0.469vw;
            left: 1.250vw; } }
      .customHeader .menu .hemburg.open span:nth-child(2) {
        width: 0%;
        opacity: 0; }
      .customHeader .menu .hemburg.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: -2px;
        left: -2px; }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .hemburg.open span:nth-child(3) {
            top: -0.313vw;
            left: -0.313vw; } }
    .customHeader .menu .inner-menu {
      transition: 0.6s all ease-in-out;
      -webkit-transition: 0.6s all ease-in-out;
      -moz-transition: 0.6s all ease-in-out;
      -ms-transition: 0.6s all ease-in-out;
      -o-transition: 0.6s all ease-in-out; }
      @media screen and (max-width: 991px) {
        .customHeader .menu .inner-menu {
          position: fixed;
          width: 100%;
          left: 100%;
          height: 100%;
          top: 0;
          background-color: #1D27C1; }
          .customHeader .menu .inner-menu:before {
            content: '';
            background-color: #000;
            width: 100%;
            height: 100%;
            left: 100%;
            right: 0;
            top: 16px;
            position: fixed;
            z-index: 1;
            transition: 0.6s all ease-in-out;
            -webkit-transition: 0.6s all ease-in-out;
            -moz-transition: 0.6s all ease-in-out;
            -ms-transition: 0.6s all ease-in-out;
            -o-transition: 0.6s all ease-in-out; } }
      @media only screen and (max-width: 640px) {
        .customHeader .menu .inner-menu:before {
          top: 2.500vw; } }
      .customHeader .menu .inner-menu .mb-header {
        display: none;
        position: relative;
        z-index: 2;
        padding: 43px 46px 83px 41px;
        opacity: 0;
        transition: 0.6s all ease-in-out;
        -webkit-transition: 0.6s all ease-in-out;
        -moz-transition: 0.6s all ease-in-out;
        -ms-transition: 0.6s all ease-in-out;
        -o-transition: 0.6s all ease-in-out; }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .inner-menu .mb-header {
            padding: 6.719vw 7.188vw 12.969vw 6.406vw; } }
        .customHeader .menu .inner-menu .mb-header .mb-logo img {
          width: 86px;
          height: auto; }
          @media only screen and (max-width: 640px) {
            .customHeader .menu .inner-menu .mb-header .mb-logo img {
              width: 13.438vw; } }
        @media screen and (max-width: 991px) {
          .customHeader .menu .inner-menu .mb-header {
            display: block; } }
      .customHeader .menu .inner-menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: inline-block;
        opacity: 1;
        transition: 0.6s all ease-in-out;
        -webkit-transition: 0.6s all ease-in-out;
        -moz-transition: 0.6s all ease-in-out;
        -ms-transition: 0.6s all ease-in-out;
        -o-transition: 0.6s all ease-in-out; }
        @media screen and (max-width: 991px) {
          .customHeader .menu .inner-menu ul {
            display: block;
            position: relative;
            z-index: 2;
            padding: 0px 43px 20px 132px; } }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .inner-menu ul {
            padding: 0px 6.719vw 3.125vw 20.625vw; } }
        .customHeader .menu .inner-menu ul li {
          padding: 0 1.641vw;
          display: inline-block;
          transition: 0.6s all ease-in-out;
          -webkit-transition: 0.6s all ease-in-out;
          -moz-transition: 0.6s all ease-in-out;
          -ms-transition: 0.6s all ease-in-out;
          -o-transition: 0.6s all ease-in-out; }
          @media screen and (max-width: 991px) {
            .customHeader .menu .inner-menu ul li {
              display: block;
              padding: 0;
              padding-left: 100px;
              opacity: 0; } }
          .customHeader .menu .inner-menu ul li a {
            font-size: 1.198vw;
            line-height: 1.458vw;
            color: #fff; }
            @media only screen and (max-width: 991px) {
              .customHeader .menu .inner-menu ul li a {
                font-size: 50px;
                line-height: 109px; } }
            @media only screen and (max-width: 640px) {
              .customHeader .menu .inner-menu ul li a {
                font-size: 7.813vw;
                line-height: 17.031vw; } }
        .customHeader .menu .inner-menu ul.hide {
          opacity: 0; }
      .customHeader .menu .inner-menu .btn-them {
        margin-left: 1.641vw;
        font-family: "SequelBoldDisp", sans-serif;
        display: inline-block; }
        @media screen and (max-width: 991px) {
          .customHeader .menu .inner-menu .btn-them {
            transition: 0.6s all ease-in-out;
            -webkit-transition: 0.6s all ease-in-out;
            -moz-transition: 0.6s all ease-in-out;
            -ms-transition: 0.6s all ease-in-out;
            -o-transition: 0.6s all ease-in-out;
            position: relative;
            margin-left: 0;
            z-index: 2;
            opacity: 0;
            left: 100px;
            font-size: 27px;
            line-height: 31px;
            letter-spacing: 0.51px;
            padding: 34.5px 32.4px;
            margin-bottom: 54.14px; }
            .customHeader .menu .inner-menu .btn-them svg {
              width: 32.4px;
              height: auto;
              margin-left: 127px; }
            .customHeader .menu .inner-menu .btn-them.btn-contactus {
              display: none; } }
        @media only screen and (max-width: 640px) {
          .customHeader .menu .inner-menu .btn-them {
            font-size: 4.219vw;
            line-height: 4.844vw;
            letter-spacing: 0.080vw;
            padding: 5.391vw 5.062vw;
            margin-bottom: 8.459vw; }
            .customHeader .menu .inner-menu .btn-them svg {
              width: 5.062vw;
              margin-left: 19.844vw; } }
      @media only screen and (max-width: 991px) {
        .customHeader .menu .inner-menu .mb-body {
          max-height: calc(100vh - 212px);
          overflow-y: auto;
          overflow-x: hidden; }
        .customHeader .menu .inner-menu .mb-footer {
          padding: 0px 43px 20px 132px;
          margin-top: 214px; }
          .customHeader .menu .inner-menu .mb-footer p {
            z-index: 1;
            position: relative;
            font-size: 25px;
            line-height: 30px;
            color: #ffffff;
            margin-bottom: 20px;
            left: 100px;
            opacity: 0;
            transition: 0.6s all ease-in-out;
            -webkit-transition: 0.6s all ease-in-out;
            -moz-transition: 0.6s all ease-in-out;
            -ms-transition: 0.6s all ease-in-out;
            -o-transition: 0.6s all ease-in-out; } }
      @media only screen and (max-width: 640px) {
        .customHeader .menu .inner-menu .mb-body {
          max-height: calc(100vh - 33.125vw); }
        .customHeader .menu .inner-menu .mb-footer {
          padding: 0px 6.719vw 3.125vw 20.625vw;
          margin-top: 33.438vw; }
          .customHeader .menu .inner-menu .mb-footer p {
            font-size: 3.906vw;
            line-height: 4.688vw;
            margin-bottom: 3.125vw; } }
      @media (max-width: 414px) and (max-height: 750px) {
        .customHeader .menu .inner-menu .mb-footer {
          margin-top: 8.438vw; } }
      .customHeader .menu .inner-menu.open {
        left: 0; }
        .customHeader .menu .inner-menu.open:before {
          transition-delay: 0.1s;
          left: 16px; }
          @media only screen and (max-width: 640px) {
            .customHeader .menu .inner-menu.open:before {
              left: 2.500vw; } }
        .customHeader .menu .inner-menu.open .mb-header {
          transition-delay: 0.5s;
          opacity: 1; }
        .customHeader .menu .inner-menu.open ul li {
          opacity: 1;
          padding-left: 0px;
          transition-delay: 0.6s; }
          .customHeader .menu .inner-menu.open ul li:nth-child(2) {
            transition-delay: 0.7s; }
          .customHeader .menu .inner-menu.open ul li:nth-child(3) {
            transition-delay: 0.8s; }
          .customHeader .menu .inner-menu.open ul li:nth-child(4) {
            transition-delay: 0.9s; }
          .customHeader .menu .inner-menu.open ul li:nth-child(5) {
            transition-delay: 0.10s; }
        .customHeader .menu .inner-menu.open .btn-them {
          opacity: 1;
          left: 0px;
          transition-delay: 1s; }
        .customHeader .menu .inner-menu.open .mb-footer p {
          opacity: 1;
          left: 0px;
          transition-delay: 1.1s; }
          .customHeader .menu .inner-menu.open .mb-footer p:last-child {
            opacity: 1;
            left: 0px;
            transition-delay: 1.2s; }

footer {
  padding-top: 4.427vw; }
  @media only screen and (max-width: 991px) {
    footer {
      padding-top: 116px; } }
  @media only screen and (max-width: 640px) {
    footer {
      padding-top: 18.125vw; } }
  @media only screen and (max-width: 991px) {
    footer .technoPart {
      margin: 0; } }
  footer .technoPart .title h2 {
    color: #fff;
    font-family: "SequelHeavyDisp", sans-serif;
    font-size: 1.563vw;
    line-height: 1.823vw; }
    @media only screen and (max-width: 991px) {
      footer .technoPart .title h2 {
        font-size: 24px;
        line-height: 24px; } }
    @media only screen and (max-width: 640px) {
      footer .technoPart .title h2 {
        font-size: 3.750vw;
        line-height: 3.750vw; } }
    footer .technoPart .title h2:after {
      content: '';
      position: relative;
      width: 5.219vw;
      height: 1px;
      background-color: #fff;
      margin-top: 0.781vw;
      display: block; }
      @media only screen and (max-width: 991px) {
        footer .technoPart .title h2:after {
          width: 174.66px;
          margin-top: 18.2px; } }
      @media only screen and (max-width: 640px) {
        footer .technoPart .title h2:after {
          width: 27.291vw;
          margin-top: 2.844vw; } }
  footer .technoPart .technoLogo {
    list-style: none;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
    justify-content: space-between; }
    @media only screen and (max-width: 991px) {
      footer .technoPart .technoLogo {
        justify-content: space-around; } }
    footer .technoPart .technoLogo li {
      display: inline-block;
      text-align: center;
      padding: 0 0.521vw; }
      @media only screen and (max-width: 991px) {
        footer .technoPart .technoLogo li {
          padding: 0 25px;
          margin-bottom: 50px; } }
      @media only screen and (max-width: 640px) {
        footer .technoPart .technoLogo li {
          padding: 0 3.906vw;
          margin-bottom: 7.813vw; } }
  footer .footer {
    padding-top: 5.313vw;
    padding-bottom: 3.177vw; }
    @media only screen and (max-width: 991px) {
      footer .footer {
        padding-top: 22px;
        padding-bottom: 58px; } }
    @media only screen and (max-width: 640px) {
      footer .footer {
        padding-top: 3.438vw;
        padding-bottom: 9.063vw; } }
    footer .footer .footer-logo {
      max-width: 14.323vw;
      text-align: center; }
      @media only screen and (max-width: 991px) {
        footer .footer .footer-logo {
          max-width: 270px;
          margin: auto;
          margin-bottom: 72px; } }
      @media only screen and (max-width: 640px) {
        footer .footer .footer-logo {
          max-width: 42.188vw;
          margin-bottom: 11.250vw; } }
      footer .footer .footer-logo .copyright {
        color: #8491DF;
        font-size: 0.729vw;
        line-height: 0.885vw;
        margin-top: 0.521vw;
        padding-left: 2.604vw; }
        @media only screen and (max-width: 991px) {
          footer .footer .footer-logo .copyright {
            font-size: 13.6px;
            line-height: 16px;
            margin-top: 0px;
            padding-left: 30px; } }
        @media only screen and (max-width: 640px) {
          footer .footer .footer-logo .copyright {
            font-size: 2.125vw;
            line-height: 2.500vw;
            padding-left: 4.688vw; } }
    footer .footer ul {
      margin: 0;
      padding: 0;
      margin-bottom: 2.917vw; }
      @media only screen and (max-width: 991px) {
        footer .footer ul {
          margin-bottom: 74px; } }
      @media only screen and (max-width: 640px) {
        footer .footer ul {
          margin-bottom: 11.563vw; } }
      footer .footer ul li {
        list-style: none; }
        footer .footer ul li a {
          color: #ffffff;
          font-size: 0.938vw;
          line-height: 1.875vw;
          transition: 0.4s all ease-in-out;
          -webkit-transition: 0.4s all ease-in-out;
          -moz-transition: 0.4s all ease-in-out;
          -ms-transition: 0.4s all ease-in-out;
          -o-transition: 0.4s all ease-in-out; }
          @media only screen and (max-width: 991px) {
            footer .footer ul li a {
              font-size: 18px;
              line-height: 44px; } }
          @media only screen and (max-width: 640px) {
            footer .footer ul li a {
              font-size: 2.813vw;
              line-height: 6.875vw; } }
          footer .footer ul li a:hover {
            color: #F3E074; }
    footer .footer .socialIcon {
      margin-bottom: 0; }
      @media only screen and (max-width: 991px) {
        footer .footer .socialIcon {
          text-align: center;
          margin-bottom: 46px; } }
      @media only screen and (max-width: 640px) {
        footer .footer .socialIcon {
          margin-bottom: 7.188vw; } }
      footer .footer .socialIcon li {
        list-style: none;
        display: inline-block;
        padding: 0 1.146vw; }
        @media only screen and (max-width: 991px) {
          footer .footer .socialIcon li {
            padding: 0 22px; } }
        @media only screen and (max-width: 640px) {
          footer .footer .socialIcon li {
            padding: 0 3.438vw; } }
        footer .footer .socialIcon li a {
          color: #ffffff;
          font-size: 1.354vw;
          transition: 0.4s all ease-in-out;
          -webkit-transition: 0.4s all ease-in-out;
          -moz-transition: 0.4s all ease-in-out;
          -ms-transition: 0.4s all ease-in-out;
          -o-transition: 0.4s all ease-in-out; }
          @media only screen and (max-width: 991px) {
            footer .footer .socialIcon li a {
              font-size: 26px; } }
          @media only screen and (max-width: 640px) {
            footer .footer .socialIcon li a {
              font-size: 4.063vw; } }
          footer .footer .socialIcon li a:hover {
            color: #F3E074; }
        footer .footer .socialIcon li:first-child {
          padding-left: 0; }
        footer .footer .socialIcon li:last-child {
          padding-right: 0; }
    footer .footer address {
      margin-bottom: 0; }
      footer .footer address p {
        color: #ffffff;
        font-size: 0.938vw;
        line-height: 0.833vw; }
        @media only screen and (max-width: 991px) {
          footer .footer address p {
            font-size: 18px;
            line-height: 22px;
            text-align: center; } }
        @media only screen and (max-width: 640px) {
          footer .footer address p {
            font-size: 2.813vw;
            line-height: 3.438vw; } }
        footer .footer address p:first-child {
          margin-bottom: 0.833vw; }
          @media only screen and (max-width: 991px) {
            footer .footer address p:first-child {
              margin-bottom: 15px; } }
          @media only screen and (max-width: 640px) {
            footer .footer address p:first-child {
              margin-bottom: 2.344vw; } }

.heroSection {
  padding: 12.969vw 0 3.854vw;
  position: relative; }
  @media only screen and (max-width: 991px) {
    .heroSection {
      padding: 263.3px 0 40px; } }
  @media only screen and (max-width: 640px) {
    .heroSection {
      padding: 41.141vw 0 6.250vw; } }
  .heroSection .main-title h1 {
    color: #ffffff;
    font-family: "SequelMediumDisp", sans-serif;
    font-size: 5.208vw;
    line-height: 5.469vw;
    margin-bottom: 2.240vw; }
    @media only screen and (max-width: 991px) {
      .heroSection .main-title h1 {
        font-size: 50px;
        line-height: 64px;
        margin-bottom: 51px; } }
    @media only screen and (max-width: 640px) {
      .heroSection .main-title h1 {
        font-size: 7.813vw;
        line-height: 10vw;
        margin-bottom: 7.969vw; } }
  .heroSection .main-title p {
    color: #ffffff;
    font-family: "SequelLightBody", sans-serif;
    font-size: 1.458vw;
    line-height: 1.875vw; }
    @media only screen and (max-width: 991px) {
      .heroSection .main-title p {
        font-size: 27px;
        line-height: 36px; } }
    @media only screen and (max-width: 640px) {
      .heroSection .main-title p {
        font-size: 4.219vw;
        line-height: 5.625vw; } }

.shopifySection {
  width: 100%;
  overflow: hidden;
  background-color: #F5F4F4; }
  .shopifySection .customPadding {
    padding-left: 5.208vw;
    padding-top: 4.167vw;
    padding-bottom: 4.167vw; }
    @media only screen and (max-width: 991px) {
      .shopifySection .customPadding {
        max-width: 100%;
        margin: auto;
        padding: 53px 0 65px; }
        .shopifySection .customPadding .row {
          margin: 0; } }
    @media only screen and (max-width: 640px) {
      .shopifySection .customPadding {
        padding: 8.281vw 0 10.156vw; } }
    .shopifySection .customPadding .content {
      padding-right: 3.125vw; }
      @media only screen and (max-width: 991px) {
        .shopifySection .customPadding .content {
          padding-right: 0; } }
    .shopifySection .customPadding .animate-img {
      background-color: #ffffff;
      overflow: hidden;
      width: 100%; }
      @media only screen and (max-width: 991px) {
        .shopifySection .customPadding .animate-img {
          margin-bottom: 51px; } }
      @media only screen and (max-width: 640px) {
        .shopifySection .customPadding .animate-img {
          margin-bottom: 7.969vw; } }
      .shopifySection .customPadding .animate-img .shopifySlider .slide {
        transition: 0s all ease-in-out !important;
        outline: none !important; }
        .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg {
          display: flex;
          min-height: 35.208vw;
          align-items: flex-end;
          justify-content: center;
          width: 100%;
          position: relative;
          overflow: hidden; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg {
              min-height: 364px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg {
              min-height: 56.875vw; } }
          .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .mb-img {
            display: inline-block;
            position: relative;
            z-index: 3; }
          .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .pc-img {
            display: inline-block;
            /* margin-bottom: 2.083vw; */
            position: relative;
            z-index: 2; }
          .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .bg-yellow {
            position: absolute;
            background-color: #F3E074;
            width: 100%;
            height: 10.938vw;
            right: -100%;
            transition: 1s right ease-in-out;
            -webkit-transition: 1s right ease-in-out;
            -moz-transition: 1s right ease-in-out;
            -ms-transition: 1s right ease-in-out;
            -o-transition: 1s right ease-in-out;
            text-delay: 0.6s; }
            @media only screen and (max-width: 991px) {
              .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .bg-yellow {
                height: 113px; } }
            @media only screen and (max-width: 640px) {
              .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .bg-yellow {
                height: 17.656vw; } }
          .shopifySection .customPadding .animate-img .shopifySlider .slide .slideImg .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            right: -100%;
            background-color: #000000;
            z-index: 4;
            transition: 1s all ease-in-out;
            -webkit-transition: 1s all ease-in-out;
            -moz-transition: 1s all ease-in-out;
            -ms-transition: 1s all ease-in-out;
            -o-transition: 1s all ease-in-out;
            transition-delay: 3.5s; }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .mb-img {
          width: 10.99vw;
          margin-right: -5.266vw;
          margin-bottom: 2.24vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .mb-img {
              width: 108px;
              margin-right: -51px;
              margin-bottom: 23px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .mb-img {
              width: 16.875vw;
              margin-right: -7.969vw;
              margin-bottom: 3.594vw; } }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .pc-img {
          width: 31.198vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .pc-img {
              width: 306px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-1 .slideImg .pc-img {
              width: 47.813vw; } }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .mb-img {
          width: 14.99vw;
          margin-left: -7.00vw;
          margin-bottom: -1.137vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .mb-img {
              width: 148px;
              margin-left: -69px;
              margin-bottom: -9px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .mb-img {
              width: 23.125vw;
              margin-left: -10.781vw;
              margin-bottom: -1.406vw; } }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .pc-img {
          width: 34.323vw;
          margin-bottom: 1.563vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .pc-img {
              width: 340px;
              margin-bottom: 20px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-2 .slideImg .pc-img {
              width: 53.125vw;
              margin-bottom: 3.125vw; } }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .mb-img {
          width: 14.688vw;
          margin-right: -3vw;
          margin-bottom: 2.863vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .mb-img {
              width: 130px;
              margin-right: -24px;
              margin-bottom: 50px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .mb-img {
              width: 20.313vw;
              margin-right: -3.750vw;
              margin-bottom: 7.813vw; } }
        .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .pc-img {
          width: 23.073vw;
          margin-bottom: -1.0vw; }
          @media only screen and (max-width: 991px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .pc-img {
              width: 210px;
              margin-bottom: 10px; } }
          @media only screen and (max-width: 640px) {
            .shopifySection .customPadding .animate-img .shopifySlider .slide.slide-3 .slideImg .pc-img {
              width: 32.813vw;
              margin-bottom: 1.563vw; } }
      .shopifySection .customPadding .animate-img .shopifySlider .slick-track .slick-active {
        z-index: 9;
        position: relative; }
        .shopifySection .customPadding .animate-img .shopifySlider .slick-track .slick-active .slideImg .bg-yellow {
          right: 0; }
        .shopifySection .customPadding .animate-img .shopifySlider .slick-track .slick-active .slideImg .overlay {
          right: 100%; }
    @media only screen and (min-width: 992px) {
      .shopifySection .customPadding .row {
        direction: rtl; }
      .shopifySection .customPadding .d-flex-7 {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
        direction: ltr;
        padding: 0 0.781vw; }
      .shopifySection .customPadding .d-flex-5 {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
        direction: ltr;
        padding: 0 0.781vw; } }
    @media only screen and (max-width: 991px) {
      .shopifySection .customPadding .d-flex-7 {
        width: 100%;
        padding-left: 40px; }
      .shopifySection .customPadding .d-flex-5 {
        padding-left: 40px;
        padding-right: 40px; } }
    @media only screen and (max-width: 640px) {
      .shopifySection .customPadding .d-flex-7 {
        padding-left: 6.250vw; }
      .shopifySection .customPadding .d-flex-5 {
        padding-left: 6.250vw;
        padding-right: 6.250vw; } }

.ourProject {
  padding: 5.469vw 0; }
  @media only screen and (max-width: 991px) {
    .ourProject {
      padding: 79px 0 0; } }
  @media only screen and (max-width: 640px) {
    .ourProject {
      padding: 12.344vw 0 0; } }
  .ourProject .waterfall {
    /*background-color: #f2f2f2;*/
    padding: 0;
    visibility: visible;
    margin-right: -1.563vw;
    margin-left: -1.563vw;
    margin-bottom: 0; }
    .ourProject .waterfall:before {
      display: table;
      content: " "; }
    .ourProject .waterfall:after {
      display: table;
      content: " ";
      clear: both; }
    .ourProject .waterfall .item-img {
      float: left;
      width: 50%;
      padding-bottom: 2.813vw;
      padding-left: 1.563vw;
      padding-right: 1.563vw; }
      @media only screen and (max-width: 991px) {
        .ourProject .waterfall .item-img {
          width: 100%;
          padding-bottom: 84px; } }
      @media only screen and (max-width: 640px) {
        .ourProject .waterfall .item-img {
          padding-bottom: 13.125vw; } }
      .ourProject .waterfall .item-img img {
        width: 100%;
        height: 100%; }
      @media only screen and (min-width: 992px) {
        .ourProject .waterfall .item-img .title-box {
          min-height: 22.479vw; } }
      @media only screen and (max-width: 991px) {
        .ourProject .waterfall .item-img .title-box .title h2 {
          font-size: 50px;
          line-height: 59px;
          margin-bottom: 20px; } }
      @media only screen and (max-width: 640px) {
        .ourProject .waterfall .item-img .title-box .title h2 {
          font-size: 7.813vw;
          line-height: 9.219vw;
          margin-bottom: 3.125vw; } }
      .ourProject .waterfall .item-img .title-box .title p {
        font-family: "SequelMediumBody", sans-serif; }
        @media only screen and (max-width: 991px) {
          .ourProject .waterfall .item-img .title-box .title p {
            font-size: 28px;
            line-height: 46px; } }
        @media only screen and (max-width: 640px) {
          .ourProject .waterfall .item-img .title-box .title p {
            font-size: 4.375vw;
            line-height: 7.188vw; } }
      .ourProject .waterfall .item-img .footer-title .siteName a {
        font-family: "SequelSemiBoldBody", sans-serif;
        color: #ffffff;
        font-size: 1.146vw;
        line-height: 1.458vw;
        padding-top: 1.094vw;
        padding-bottom: 0.521vw;
        position: relative;
        overflow: hidden;
        display: block; }
        @media only screen and (max-width: 991px) {
          .ourProject .waterfall .item-img .footer-title .siteName a {
            font-size: 32px;
            line-height: 28px;
            padding-top: 34px;
            padding-bottom: 26px; } }
        @media only screen and (max-width: 640px) {
          .ourProject .waterfall .item-img .footer-title .siteName a {
            font-size: 5vw;
            line-height: 4.375vw;
            padding-top: 5.313vw;
            padding-bottom: 4.063vw; } }
        .ourProject .waterfall .item-img .footer-title .siteName a svg {
          width: 0.833vw;
          height: auto;
          margin-right: 0.625vw;
          margin-left: -1.802vw;
          opacity: 0;
          transition: 0.4s all ease-in-out;
          -webkit-transition: 0.4s all ease-in-out;
          -moz-transition: 0.4s all ease-in-out;
          -ms-transition: 0.4s all ease-in-out;
          -o-transition: 0.4s all ease-in-out; }
          @media only screen and (max-width: 991px) {
            .ourProject .waterfall .item-img .footer-title .siteName a svg {
              width: 32.4px;
              margin-right: 10px;
              margin-left: -53px; } }
          @media only screen and (max-width: 640px) {
            .ourProject .waterfall .item-img .footer-title .siteName a svg {
              width: 5.062vw;
              margin-right: 1.563vw;
              margin-left: -8.281vw; } }
      .ourProject .waterfall .item-img .footer-title a {
        display: block; }
        .ourProject .waterfall .item-img .footer-title a .codingLang {
          color: #ffffff;
          font-size: 0.625vw;
          line-height: 1.406vw;
          letter-spacing: 0.078vw;
          text-transform: uppercase;
          opacity: 0.8; }
          @media only screen and (max-width: 991px) {
            .ourProject .waterfall .item-img .footer-title a .codingLang {
              font-size: 20px;
              line-height: 27px;
              letter-spacing: 2.5px; } }
          @media only screen and (max-width: 640px) {
            .ourProject .waterfall .item-img .footer-title a .codingLang {
              font-size: 3.125vw;
              line-height: 4.219vw;
              letter-spacing: 0.391vw; } }
      .ourProject .waterfall .item-img .footer-title:hover .siteName svg {
        margin-left: 0;
        opacity: 1; }
      .ourProject .waterfall .item-img .hoverImg {
        position: relative;
        overflow: hidden; }
        .ourProject .waterfall .item-img .hoverImg img {
          position: relative;
          z-index: 2; }
        .ourProject .waterfall .item-img .hoverImg .hover-img {
          position: absolute;
          width: 100%;
          top: 0;
          left: 0;
          opacity: 0;
          transition: 0.6s all;
          -webkit-transition: 0.6s all;
          -moz-transition: 0.6s all;
          -ms-transition: 0.6s all;
          -o-transition: 0.6s all; }
        .ourProject .waterfall .item-img .hoverImg .imgEffect-bg {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background-color: #ffffff;
          z-index: 11; }
          .ourProject .waterfall .item-img .hoverImg .imgEffect-bg.removeBG {
            transition: all 0.5s; }
            .ourProject .waterfall .item-img .hoverImg .imgEffect-bg.removeBG.bgOut {
              left: 100%; }
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0; } }
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0; } }
        .ourProject .waterfall .item-img .hoverImg:hover img {
          opacity: 0; }
        .ourProject .waterfall .item-img .hoverImg:hover .hover-img {
          opacity: 1; }
      .ourProject .waterfall .item-img .lastTitle {
        padding: 6.250vw 6.656vw 6.250vw 8.490vw;
        position: relative;
        overflow: hidden; }
        .ourProject .waterfall .item-img .lastTitle .blckEffect-bg {
          background-color: #323232;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0; }
        @media only screen and (max-width: 991px) {
          .ourProject .waterfall .item-img .lastTitle {
            padding: 69px 40px 93px;
            text-align: center; } }
        @media only screen and (max-width: 640px) {
          .ourProject .waterfall .item-img .lastTitle {
            padding: 10.781vw 6.250vw 14.531vw; } }
        .ourProject .waterfall .item-img .lastTitle .title {
          position: relative;
          z-index: 2; }
          .ourProject .waterfall .item-img .lastTitle .title h2 {
            font-family: "SequelHeavyBody", sans-serif;
            text-transform: uppercase;
            font-size: 1.250vw;
            line-height: 1.510vw; }
            @media only screen and (max-width: 991px) {
              .ourProject .waterfall .item-img .lastTitle .title h2 {
                font-size: 32px;
                line-height: 40px;
                margin-bottom: 40px; } }
            @media only screen and (max-width: 640px) {
              .ourProject .waterfall .item-img .lastTitle .title h2 {
                font-size: 5vw;
                line-height: 6.250vw;
                margin-bottom: 6.250vw; } }
          .ourProject .waterfall .item-img .lastTitle .title p {
            font-family: "SequelMediumDisp", sans-serif;
            font-size: 1.042vw;
            line-height: 1.458vw; }
            @media only screen and (max-width: 991px) {
              .ourProject .waterfall .item-img .lastTitle .title p {
                font-size: 27px;
                line-height: 44px; } }
            @media only screen and (max-width: 640px) {
              .ourProject .waterfall .item-img .lastTitle .title p {
                font-size: 4.219vw;
                line-height: 6.875vw; } }
        @media only screen and (max-width: 991px) {
          .ourProject .waterfall .item-img .lastTitle .btn-them {
            margin-top: 46px;
            font-size: 26px;
            letter-spacing: 0.49px;
            padding: 33px 50.6px; }
            .ourProject .waterfall .item-img .lastTitle .btn-them svg {
              width: 31px;
              height: auto; } }
        @media only screen and (max-width: 640px) {
          .ourProject .waterfall .item-img .lastTitle .btn-them {
            margin-top: 7.188vw;
            font-size: 4.063vw;
            letter-spacing: 0.077vw;
            padding: 5.156vw 7.906vw; }
            .ourProject .waterfall .item-img .lastTitle .btn-them svg {
              width: 4.844vw; } }
  .ourProject .btn-them {
    margin-top: 2.448vw;
    text-transform: inherit;
    font-family: "SequelRomanHead", sans-serif;
    padding: 0.990vw 0.917vw;
    font-size: 0.781vw;
    letter-spacing: 0.015vw; }
    @media only screen and (max-width: 991px) {
      .ourProject .btn-them {
        padding: 19px 17.6px;
        font-size: 15px;
        letter-spacing: 0.28px;
        margin-top: 57px; } }
    @media only screen and (max-width: 640px) {
      .ourProject .btn-them {
        padding: 2.969vw 2.750vw;
        font-size: 2.344vw;
        letter-spacing: 0.044vw;
        margin-top: 8.906vw; } }
    .ourProject .btn-them svg {
      margin-left: 3.542vw;
      width: 0.938vw; }
      @media only screen and (max-width: 991px) {
        .ourProject .btn-them svg {
          margin-left: 68px;
          width: 18px; } }
      @media only screen and (max-width: 640px) {
        .ourProject .btn-them svg {
          margin-left: 10.625vw;
          width: 2.813vw; } }

.workLang {
  padding: 6.250vw 0; }
  .workLang .workLangLogo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0; }
    .workLang .workLangLogo li {
      width: 100%;
      padding: 1vw  3.125vw;
      max-width: 25%;
      -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
      text-align: center;
      margin: auto;
      list-style: none;
      background-color: #EEEFF0;
      height: 11.615vw;
      /* line-height: 6.688vw; */
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center; }
      .workLang .workLangLogo li img {
        max-height: 3.885vw; }

.caseStudy {
  padding: 19.271vw 0 5.313vw; }
  @media only screen and (max-width: 991px) {
    .caseStudy {
      padding: 278px 0 72px; } }
  @media only screen and (max-width: 640px) {
    .caseStudy {
      padding: 43.438vw 0 11.250vw; } }
  .caseStudy .col-lg-8-7 {
    max-width: 55.938vw; }
    @media only screen and (max-width: 991px) {
      .caseStudy .col-lg-8-7 {
        max-width: none; } }
  .caseStudy .main-title h1 {
    font-family: "SequelMediumBody", sans-serif;
    font-size: 2.188vw;
    line-height: 2.969vw;
    margin-bottom: 0; }
    @media only screen and (max-width: 991px) {
      .caseStudy .main-title h1 {
        font-size: 42px;
        line-height: 53px;
        max-width: 550px; } }
    @media only screen and (max-width: 640px) {
      .caseStudy .main-title h1 {
        font-size: 6.563vw;
        line-height: 8.281vw;
        max-width: 85.938vw; } }

@media only screen and (max-width: 991px) {
  .collection {
    padding: 75px 0 0; } }
@media only screen and (max-width: 991px) {
  .collection .waterfall .item-img {
    padding-bottom: 75px; } }
.collection .waterfall .item-img .title-box .title p {
  font-size: 1.563vw;
  line-height: 2.135vw;
  letter-spacing: -0.010vw; }
  @media only screen and (max-width: 991px) {
    .collection .waterfall .item-img .title-box .title p {
      font-size: 36px;
      line-height: 48px;
      letter-spacing: normal; } }
  @media only screen and (max-width: 640px) {
    .collection .waterfall .item-img .title-box .title p {
      font-size: 5.625vw;
      line-height: 7.500vw; } }
  @media only screen and (max-width: 991px) {
    .collection .waterfall .item-img .title-box .title p.mobileText {
      font-size: 28px;
      line-height: 46px;
      letter-spacing: normal; } }
  @media only screen and (max-width: 640px) {
    .collection .waterfall .item-img .title-box .title p.mobileText {
      font-size: 4.375vw;
      line-height: 7.188vw; } }
.collection .waterfall .item-img .title-box.lastTitle .title p {
  font-size: 1.250vw;
  line-height: 1.510vw;
  letter-spacing: normal; }
  @media only screen and (max-width: 991px) {
    .collection .waterfall .item-img .title-box.lastTitle .title p {
      font-size: 27px;
      line-height: 48px;
      letter-spacing: normal; } }
  @media only screen and (max-width: 640px) {
    .collection .waterfall .item-img .title-box.lastTitle .title p {
      font-size: 4.219vw;
      line-height: 7.500vw; } }

@media (min-width: 992px) {
  .collection .waterfall .item-img .title-box.lastTitle.caseStudyLastTitle .title h2 {
    font-family: "SequelHeavyBody", sans-serif;
    font-size: 1.250vw;
    line-height: 1.510vw; } }
@media (min-width: 992px) {
  .collection .waterfall .item-img .title-box.lastTitle.caseStudyLastTitle .title p {
    font-family: "SequelMediumDisp", sans-serif;
    font-size: 1.042vw;
    line-height: 1.458vw;
    max-width: 21.510vw; } }

/* case study inner page Css start */
@media only screen and (max-width: 991px) {
  .caseStudyHeader {
    position: static; } }

.bannerSection {
  position: relative;
  z-index: -1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  margin-top: 8.641vw;
  height: 28.438vw; }
  @media only screen and (max-width: 991px) {
    .bannerSection {
      margin-top: -1px;
      height: 252px; } }
  @media only screen and (max-width: 640px) {
    .bannerSection {
      margin-top: -0.156vw;
      height: 39.375vw; } }
  .bannerSection .logoWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.caseStudyTitle {
  font-family: "SequelMediumHead", sans-serif;
  color: #000000;
  font-size: 2.083vw;
  line-height: 2.448vw;
  margin-bottom: 1.042vw; }
  @media only screen and (max-width: 991px) {
    .caseStudyTitle {
      font-size: 42px;
      line-height: 49px;
      margin-bottom: 20px;
      max-width: 572px; } }
  @media only screen and (max-width: 640px) {
    .caseStudyTitle {
      font-size: 6.563vw;
      line-height: 7.656vw;
      margin-bottom: 3.125vw;
      max-width: 89.375vw; } }

.caseStudySubTitle {
  font-family: "SequelMediumBody", sans-serif;
  color: #000000;
  font-size: 1.146vw;
  line-height: 1.927vw;
  padding-top: 0.313vw;
  text-transform: uppercase; }
  @media only screen and (max-width: 991px) {
    .caseStudySubTitle {
      font-size: 24px;
      line-height: 37px;
      margin-bottom: 10px; } }
  @media only screen and (max-width: 640px) {
    .caseStudySubTitle {
      font-size: 3.70vw;
      line-height: 5.781vw;
      margin-bottom: 1.563vw; } }

.caseStudyText {
  font-family: "SequelLightBody", sans-serif;
  color: #000000;
  font-size: 1.146vw;
  line-height: 1.875vw;
  margin-bottom: 2.083vw; }
  @media only screen and (max-width: 991px) {
    .caseStudyText {
      font-size: 26px;
      line-height: 38px;
      max-width: 572px;
      margin-bottom: 40px; } }
  @media only screen and (max-width: 640px) {
    .caseStudyText {
      font-size: 4.063vw;
      line-height: 5.938vw;
      max-width: 89.375vw;
      margin-bottom: 6.250vw; } }
  .caseStudyText .Title {
    font-family: "SequelMediumBody", sans-serif;
    margin-right: 1.146vw;
    text-transform: uppercase; }
    @media only screen and (max-width: 991px) {
      .caseStudyText .Title {
        display: block;
        font-size: 22px; } }
    @media only screen and (max-width: 640px) {
      .caseStudyText .Title {
        font-size: 3.438vw; } }
    @media only screen and (max-width: 991px) {
      .caseStudyText .Title + span {
        font-size: 22px; } }
    @media only screen and (max-width: 640px) {
      .caseStudyText .Title + span {
        font-size: 3.438vw; } }

.caseStudyInfoSection {
  padding: 80px 0 0; }
  @media only screen and (max-width: 991px) {
    .caseStudyInfoSection {
      padding: 65px 0 0; } }
  @media only screen and (max-width: 640px) {
    .caseStudyInfoSection {
      padding: 14.844vw 0 0; } }
  .caseStudyInfoSection .titleInfoRow .col-lg-8 {
    padding: 0; }
    @media only screen and (max-width: 640px) {
      .caseStudyInfoSection .titleInfoRow .col-lg-8 {
        padding: 0 15px; } }
  .caseStudyInfoSection .titleInfoRow .clientInfoWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    @media only screen and (max-width: 991px) {
      .caseStudyInfoSection .titleInfoRow .clientInfoWrapper {
        justify-content: start;
        flex-direction: column;
        margin-top: 45px; } }
    @media only screen and (max-width: 640px) {
      .caseStudyInfoSection .titleInfoRow .clientInfoWrapper {
        margin-top: 7.031vw; } }
    @media only screen and (max-width: 991px) {
      .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo {
        margin-bottom: 40px; } }
    @media only screen and (max-width: 640px) {
      .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo {
        margin-bottom: 6.250vw; } }
    .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientTitle {
      font-family: "SequelMediumBody", sans-serif;
      color: #000000;
      text-transform: uppercase;
      font-size: 1.146vw;
      line-height: 1.927vw;
      margin-bottom: 0.260vw; }
      @media only screen and (max-width: 991px) {
        .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientTitle {
          font-size: 22px;
          line-height: 37px;
          margin-bottom: 5px; } }
      @media only screen and (max-width: 640px) {
        .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientTitle {
          font-size: 3.438vw;
          line-height: 5.781vw;
          margin-bottom: 0.260vw; } }
    .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientText {
      font-family: "SequelLightBody", sans-serif;
      color: #000000;
      font-size: 1.146vw;
      line-height: 2.083vw; }
      @media only screen and (max-width: 991px) {
        .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientText {
          font-size: 22px;
          line-height: 40px; } }
      @media only screen and (max-width: 640px) {
        .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientText {
          font-size: 3.438vw;
          line-height: 6.250vw; } }
      .caseStudyInfoSection .titleInfoRow .clientInfoWrapper .clientInfo .clientText a {
        color: #000000; }
    .caseStudyInfoSection .titleInfoRow .clientInfoWrapper.metabolicInfoWrapper {
      margin-top: 0; }
  .caseStudyInfoSection .titleInfoRow .list-itemss li {
    position: relative;
    display: flex;
    font-family: "SequelLightBody", sans-serif;
    color: #000000;
    font-size: 1.146vw;
    line-height: 1.875vw;
    padding-left: 0.521vw; }
    @media only screen and (max-width: 991px) {
      .caseStudyInfoSection .titleInfoRow .list-itemss li {
        font-size: 24px;
        line-height: 38px;
        max-width: 572px;
        padding-left: 10px; } }
    @media only screen and (max-width: 640px) {
      .caseStudyInfoSection .titleInfoRow .list-itemss li {
        font-size: 3.70vw;
        line-height: 5.938vw;
        max-width: 89.375vw;
        padding-left: 1.563vw; } }
    .caseStudyInfoSection .titleInfoRow .list-itemss li:last-child {
      margin-bottom: 2.083vw; }
      @media only screen and (max-width: 991px) {
        .caseStudyInfoSection .titleInfoRow .list-itemss li:last-child {
          margin-bottom: 40px; } }
      @media only screen and (max-width: 640px) {
        .caseStudyInfoSection .titleInfoRow .list-itemss li:last-child {
          margin-bottom: 6.250vw; } }
    .caseStudyInfoSection .titleInfoRow .list-itemss li::before {
      position: absolute;
      content: '';
      background-color: #000000;
      height: 3px;
      width: 3px;
      border-radius: 50%;
      left: 0;
      top: 50%;
      transform: translateY(-50%); }
      @media only screen and (max-width: 991px) {
        .caseStudyInfoSection .titleInfoRow .list-itemss li::before {
          top: 25%;
          transform: none; } }
  .caseStudyInfoSection .websiteImageWrapper {
    margin: 5.208vw 0 5.752vw;
    width: 100%; }
    @media only screen and (max-width: 991px) {
      .caseStudyInfoSection .websiteImageWrapper {
        margin: 10px -40px 50px !important;
        max-width: none;
        width: auto; } }
    @media only screen and (max-width: 640px) {
      .caseStudyInfoSection .websiteImageWrapper {
        margin: 1.563vw -6.250vw 7.813vw !important; } }
    .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper {
      position: relative; }
      .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .embed-responsive-custom::before {
        padding-top: 48.25%; }
        @media only screen and (max-width: 991px) {
          .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .embed-responsive-custom::before {
            padding-top: 51%; } }
      .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .websiteImageBefore {
        position: relative;
        width: 100%;
        height: 32.396vw;
        font-size: 0;
        background-position: center; }
        @media only screen and (max-width: 991px) {
          .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .websiteImageBefore {
            width: 100%;
            height: auto; } }
      .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .websiteImageAfter {
        position: absolute;
        width: 40%;
        height: 100%;
        overflow: hidden;
        top: 0; }
        .caseStudyInfoSection .websiteImageWrapper .beforeAfterWrapper .websiteImageAfter .embed-responsive {
          width: 100%; }
    .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper {
      max-width: 100%;
      margin: 1.563vw auto 0; }
      @media only screen and (max-width: 991px) {
        .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper {
          margin: 50px auto 0; } }
      @media only screen and (max-width: 640px) {
        .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper {
          margin: 7.813vw auto 0; } }
      .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textBefore,
      .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textAfter {
        font-family: 'Open Sans';
        font-weight: 700;
        line-height: normal;
        font-size: 18px;
        color: #B9B9B9; }
        @media only screen and (max-width: 991px) {
          .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textBefore,
          .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textAfter {
            font-size: 18px;
            line-height: 40px; } }
        @media only screen and (max-width: 640px) {
          .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textBefore,
          .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textAfter {
            font-size: 2.813vw;
            line-height: 6.250vw; } }
      .caseStudyInfoSection .websiteImageWrapper .afterBeforeWrapper .textAfter {
        color: #1D27C1; }
  @media only screen and (max-width: 991px) {
    .caseStudyInfoSection .theChallengeInfo .col-lg-2,
    .caseStudyInfoSection .theChallengeInfo .col-lg-3,
    .caseStudyInfoSection .theChallengeInfo .col-lg-6 {
      padding: 0; } }
  @media only screen and (max-width: 640px) {
    .caseStudyInfoSection .theChallengeInfo .col-lg-2,
    .caseStudyInfoSection .theChallengeInfo .col-lg-3,
    .caseStudyInfoSection .theChallengeInfo .col-lg-6 {
      padding: 0 15px; } }
  @media only screen and (max-width: 991px) {
    .caseStudyInfoSection .theChallengeInfo .caseStudyText {
      font-size: 24px; } }
  @media only screen and (max-width: 640px) {
    .caseStudyInfoSection .theChallengeInfo .caseStudyText {
      font-size: 3.70vw; } }

.CSimgColorInfoSection {
  position: relative;
  background-color: #F9F9F9;
  z-index: 0;
  padding-bottom: 5.833vw; }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection {
      padding-bottom: 0; } }
  .CSimgColorInfoSection::after {
    position: absolute;
    content: '';
    background-color: #ffffff;
    top: 0;
    left: 0;
    width: 100%;
    height: 29.688vw;
    z-index: -1; }
    @media only screen and (max-width: 991px) {
      .CSimgColorInfoSection::after {
        height: 700px; } }
    @media only screen and (max-width: 640px) {
      .CSimgColorInfoSection::after {
        height: 109.375vw; } }
  .CSimgColorInfoSection .image5Wrapper {
    width: 100%;
    text-align: center;
    margin: 3vw 0 5.208vw;
    max-width: 64.740vw; }
    @media only screen and (max-width: 991px) {
      .CSimgColorInfoSection .image5Wrapper {
        margin: 10px 0 30px;
        max-width: none; } }
    @media only screen and (max-width: 640px) {
      .CSimgColorInfoSection .image5Wrapper {
        margin: 1.563vw 0 4.688vw; } }
    @media only screen and (max-width: 991px) {
      .CSimgColorInfoSection .image5Wrapper .img5 {
        margin: 0 -15px; } }
    @media only screen and (max-width: 640px) {
      .CSimgColorInfoSection .image5Wrapper .img5 {
        margin: 0; } }
    @media only screen and (max-width: 991px) {
      .CSimgColorInfoSection .image5Wrapper .img5 img {
        width: 100%;
        margin: 0 0 20px; } }
    @media only screen and (max-width: 640px) {
      .CSimgColorInfoSection .image5Wrapper .img5 img {
        margin: 0 0 3.125vw; } }
  .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper {
    margin: 0 0.781vw; }
    @media only screen and (max-width: 991px) {
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper {
        margin: 0; } }
    .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr {
      background-color: #ffffff;
      height: 8.385vw;
      width: 6.406vw;
      margin-bottom: 2.292vw; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr1 {
        background-color: #ED8074; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr2 {
        background-color: #1D7A8C; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr3 {
        background-color: #00233A; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr4 {
        background-color: #74E1ED; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr5 {
        background-color: #4B4B4B; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.maddoxClr6 {
        border: 1px solid #CDCDCD;
        background-color: #F6F5F1; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.metabolicClr1 {
        background-color: #292929; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.metabolicClr2 {
        background-color: #C00000; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.metabolicClr3 {
        background-color: #0095FE; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.metabolicClr4 {
        border: 1px solid #CDCDCD;
        background-color: #F5F5F5; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr1 {
        background-color: #000000; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr2 {
        background-color: #E0F5FB; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr3 {
        background-color: #EAAF8E; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr4 {
        background-color: #E1E1E1; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr5 {
        background-color: #4B4B4B; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.Charles1Clr6 {
        background-color: #74E1ED; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr1 {
        background-color: #521989; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr2 {
        background-color: #170528; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr3 {
        background-color: #D5B97E; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr4 {
        background-color: #272C32; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr5 {
        background-color: #2C242D; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.royalEncClr6 {
        border: 1px solid #CDCDCD;
        background-color: #F7F4F9; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.charles2Clr1 {
        background-color: #567B97; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.charles2Clr2 {
        background-color: #252323; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.charles2Clr3 {
        background-color: #ADADAD; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.charles2Clr4 {
        border: 1px solid #CDCDCD;
        background-color: #FFFFFF; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vinylClr1 {
        background-color: #ED1846; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vinylClr2 {
        background-color: #292323; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vinylClr3 {
        border: 1px solid #CDCDCD;
        background-color: #FFFFFF; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vinylClr4 {
        background-color: #D1EEF9; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr1 {
        background-color: #A5294D; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr2 {
        background-color: #F1D964; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr3 {
        background-color: #0094C7; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr4 {
        background-color: #B78935; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr5 {
        background-color: #EFDF91; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.loveGoodClr6 {
        background-color: #EEE5CF; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vpNutritionClr1 {
        background-color: #EE7B01; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vpNutritionClr2 {
        background-color: #121212; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vpNutritionClr3 {
        background-color: #8c8d8f; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.vpNutritionClr4 {
        background-color: #CDE24E; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr1 {
        background-color: #02369D; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr2 {
        background-color: #1D4E89; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr3 {
        background-color: #FFFF04; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr4 {
        background-color: #131415; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr5 {
        background-color: #BDBCBF; }
      .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .clrr.ofxOfficeClr6 {
        border: 1px solid #CDCDCD;
        background-color: #F6F5F1; }
    .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .colorCode {
      font-family: "SequelLightBody", sans-serif;
      color: #272C32;
      text-align: center;
      font-size: 0.938vw;
      line-height: 1.875vw; }
      @media only screen and (max-width: 991px) {
        .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .colorCode {
          font-size: 18px;
          line-height: 36px; } }
      @media only screen and (max-width: 640px) {
        .CSimgColorInfoSection .colorsWrapperRow .colorsWrapper .colorCode {
          font-size: 2.813vw;
          line-height: 5.625vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible {
      padding-bottom: 79px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible {
      padding-bottom: 12.344vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible .colorsWrapper {
      margin: 0 13px 22px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible .colorsWrapper {
      margin: 0 2.031vw 3.438vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible .colorsWrapper .clrr {
      height: 161px;
      width: 123px;
      margin-bottom: 44px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible .colorsWrapper .clrr {
      height: 25.156vw;
      width: 19.219vw;
      margin-bottom: 6.875vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 {
      padding-bottom: 61px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 {
      padding-bottom: 9.531vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 .colorsWrapper {
      margin-bottom: 22px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 .colorsWrapper {
      margin-bottom: 3.438vw; } }
  @media only screen and (max-width: 991px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 .colorsWrapper .clrr {
      height: 163px;
      width: 163px;
      margin-bottom: 15px; } }
  @media only screen and (max-width: 640px) {
    .CSimgColorInfoSection .colorsWrapperRow.colorsWrapperMoible2 .colorsWrapper .clrr {
      height: 25.469vw;
      width: 25.469vw;
      margin-bottom: 2.344vw; } }

.theSolutionSection {
  padding: 6.250vw 0 3vw; }
  @media only screen and (max-width: 991px) {
    .theSolutionSection {
      padding: 71px 0 50px; } }
  @media only screen and (max-width: 640px) {
    .theSolutionSection {
      padding: 11.094vw 0 7.813vw; } }
  .theSolutionSection .caseStudyText {
    padding-right: 1.563vw; }
    @media only screen and (max-width: 991px) {
      .theSolutionSection .caseStudyText {
        padding-right: 0;
        font-size: 24px; } }
    @media only screen and (max-width: 640px) {
      .theSolutionSection .caseStudyText {
        font-size: 3.70vw; } }
  .theSolutionSection .titleInfoRow .col-lg-5 {
    padding: 0; }
  @media only screen and (max-width: 640px) {
    .theSolutionSection .titleInfoRow {
      padding: 0 15px; } }
  @media only screen and (max-width: 991px) {
    .theSolutionSection .titleInfoRow .col-lg-3 {
      padding: 0; } }

.laptopVideoSection {
  position: relative;
  z-index: 0;
  padding-bottom: 4.427vw; }
  @media only screen and (max-width: 991px) {
    .laptopVideoSection {
      padding-bottom: 40px; } }
  @media only screen and (max-width: 640px) {
    .laptopVideoSection {
      padding-bottom: 6.250vw; } }
  .laptopVideoSection.maddoxVideo {
    background-color: #74E1ED; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection.maddoxVideo {
        padding-bottom: 60px; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection.maddoxVideo {
        padding-bottom: 9.375vw; } }
  .laptopVideoSection.metabolicVideo {
    background-color: #C00000; }
  .laptopVideoSection.charlesVideo {
    background-color: #EAB090; }
  .laptopVideoSection.royalEncVideo {
    background-color: #521989; }
  .laptopVideoSection.charles2Video {
    background-color: #2A2727; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection.charles2Video {
        padding-bottom: 60px; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection.charles2Video {
        padding-bottom: 9.375vw; } }
  .laptopVideoSection.vinylVideo {
    background-color: #ED1846; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection.vinylVideo {
        background-color: #2A2727;
        padding-bottom: 60px; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection.vinylVideo {
        padding-bottom: 9.375vw; } }
  .laptopVideoSection.loveGoodVideo {
    background-color: #EFDF91; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection.loveGoodVideo {
        padding-bottom: 60px; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection.loveGoodVideo {
        padding-bottom: 9.375vw; } }
  .laptopVideoSection.vpNutritionVideo {
    background-color: #DFE9A7; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection.vpNutritionVideo {
        padding-bottom: 60px; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection.vpNutritionVideo {
        padding-bottom: 9.375vw; } }
  .laptopVideoSection.ofxOfficeVideo {
    background-color: #02369D; }
  .laptopVideoSection::after {
    position: absolute;
    content: '';
    background-color: #ffffff;
    top: 0;
    left: 0;
    width: 100%;
    height: 10.417vw;
    z-index: -1; }
  .laptopVideoSection .laptopImgWrapper {
    position: relative;
    width: 100%;
    max-width: 58.854vw; }
    @media only screen and (max-width: 991px) {
      .laptopVideoSection .laptopImgWrapper {
        max-width: 555px;
        margin: 0 auto; } }
    @media only screen and (max-width: 640px) {
      .laptopVideoSection .laptopImgWrapper {
        max-width: 86.719vw; } }
    .laptopVideoSection .laptopImgWrapper img {
      min-height: 34.219vw; }
      @media only screen and (max-width: 991px) {
        .laptopVideoSection .laptopImgWrapper img {
          min-height: 322px; } }
      @media only screen and (max-width: 640px) {
        .laptopVideoSection .laptopImgWrapper img {
          min-height: 50.313vw; } }
    .laptopVideoSection .laptopImgWrapper .videoWrapper {
      position: absolute;
      top: 1.48vw;
      width: 46.094vw; }
      @media only screen and (max-width: 991px) {
        .laptopVideoSection .laptopImgWrapper .videoWrapper {
          top: 13px;
          width: 435px; } }
      @media only screen and (max-width: 640px) {
        .laptopVideoSection .laptopImgWrapper .videoWrapper {
          top: 2.031vw;
          width: 67.969vw; } }
      .laptopVideoSection .laptopImgWrapper .videoWrapper .embed-responsive-16by9::before {
        padding-top: 62.9%; }

/* case study inner page Css end */
.screenshotSection {
  padding: 10.417vw 0 0; }
  @media only screen and (max-width: 991px) {
    .screenshotSection {
      padding: 0; } }
  .screenshotSection .screenShot1Wrapper {
    max-width: 45.833vw;
    margin: 0 auto; }
    @media only screen and (max-width: 991px) {
      .screenshotSection .screenShot1Wrapper {
        display: none; } }
  .screenshotSection .screenShot2Wrapper {
    max-width: 82.344vw;
    margin: 7.813vw 0 7.813vw auto; }
    @media only screen and (max-width: 991px) {
      .screenshotSection .screenShot2Wrapper {
        max-width: none;
        width: 100%;
        margin: 0; } }
  .screenshotSection.maddoxSSsection {
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.maddoxSSsection {
        margin-bottom: 0; } }
    .screenshotSection.maddoxSSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
      @media only screen and (max-width: 991px) {
        .screenshotSection.maddoxSSsection .screenShot1 {
          padding: 0; } }
  .screenshotSection.metabolicSSsection {
    background-color: #F9F9F9;
    margin-bottom: 7.5vw; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.metabolicSSsection {
        margin-bottom: 0; } }
  .screenshotSection.vinylSSsection {
    margin-bottom: 0;
    padding-top: 0; }
    .screenshotSection.vinylSSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
      @media only screen and (max-width: 991px) {
        .screenshotSection.vinylSSsection .screenShot1 {
          padding: 0; } }
    .screenshotSection.vinylSSsection .screenShot2 {
      background-color: #EE7B01; }
  .screenshotSection.charles2SSsection {
    margin-bottom: 7.5vw;
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.charles2SSsection {
        margin-bottom: 0; } }
    .screenshotSection.charles2SSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
      @media only screen and (max-width: 991px) {
        .screenshotSection.charles2SSsection .screenShot1 {
          padding: 0; } }
    .screenshotSection.charles2SSsection .screenShot2 {
      background-color: #567B97; }
  .screenshotSection.royalEncSSsection {
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.royalEncSSsection {
        margin-bottom: 0; } }
    .screenshotSection.royalEncSSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
      @media only screen and (max-width: 991px) {
        .screenshotSection.royalEncSSsection .screenShot1 {
          padding: 0; } }
    .screenshotSection.royalEncSSsection .screenShot2Wrapper {
      background-color: #ffffff; }
  .screenshotSection.vpNutriontionSSsection {
    margin-bottom: 7.5vw;
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.vpNutriontionSSsection {
        margin-bottom: 0; } }
    .screenshotSection.vpNutriontionSSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
    .screenshotSection.vpNutriontionSSsection .screenShot2 {
      background-color: #EE7B01; }
  .screenshotSection.ofxOfficeSSsection {
    margin-bottom: 7.5vw;
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .screenshotSection.ofxOfficeSSsection {
        margin-bottom: 0; } }
    .screenshotSection.ofxOfficeSSsection .screenShot1 {
      background-color: #F9F9F9;
      padding: 10.417vw 0 0; }
      @media only screen and (max-width: 991px) {
        .screenshotSection.ofxOfficeSSsection .screenShot1 {
          padding: 0; } }
    .screenshotSection.ofxOfficeSSsection .screenShot2 {
      background-color: #02369D; }

.mobileExperienceSection {
  position: relative;
  z-index: 0; }
  .mobileExperienceSection::after {
    position: absolute;
    content: '';
    background-color: #F9F9F9;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.729vw;
    z-index: -1; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection::after {
        height: 102px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection::after {
        height: 15.938vw; } }
  .mobileExperienceSection .col-lg-3 {
    padding-left: 30px;
    padding-right: 10px; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection .col-lg-3 {
        padding-left: 15px;
        padding-right: 15px; } }
  .mobileExperienceSection .mobileImgWrapper {
    margin: 0 auto;
    max-width: 15.625vw;
    width: 100%; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection .mobileImgWrapper {
        margin: 50px auto 0 0;
        max-width: 300px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection .mobileImgWrapper {
        margin: 7.813vw auto 0 0;
        max-width: 46.875vw; } }
  .mobileExperienceSection .caseStudyTitle {
    margin: 0.521vw 0 1.042vw; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection .caseStudyTitle {
        margin: 10px 0 55px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection .caseStudyTitle {
        margin: 1.563vw 0 8.594vw; } }
  @media only screen and (max-width: 991px) {
    .mobileExperienceSection .caseStudyText {
      font-size: 24px; } }
  @media only screen and (max-width: 640px) {
    .mobileExperienceSection .caseStudyText {
      font-size: 3.70vw; } }
  .mobileExperienceSection .mobileContent {
    padding-top: 5.469vw; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection .mobileContent {
        padding-top: 50px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection .mobileContent {
        padding-top: 7.813vw; } }
  @media only screen and (max-width: 991px) {
    .mobileExperienceSection.metabolicMobile .mobileImgWrapper {
      margin-top: 50px; } }
  @media only screen and (max-width: 640px) {
    .mobileExperienceSection.metabolicMobile .mobileImgWrapper {
      margin-top: 7.813vw; } }
  .mobileExperienceSection.charlesDavid2Mobile::after {
    background-color: #E0E0E0; }
  .mobileExperienceSection.charlesDavid2Mobile .mobileContent {
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection.charlesDavid2Mobile .mobileContent {
        padding-top: 50px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection.charlesDavid2Mobile .mobileContent {
        padding-top: 7.813vw; } }
  .mobileExperienceSection.vpNutritionMobile::after {
    background-color: #121212; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection.vpNutritionMobile::after {
        height: 180px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection.vpNutritionMobile::after {
        height: 28.125vw; } }
  @media only screen and (max-width: 991px) {
    .mobileExperienceSection.vpNutritionMobile {
      background-color: #EE7B01; } }
  @media only screen and (max-width: 991px) {
    .mobileExperienceSection.vpNutritionMobile .caseStudySubTitle,
    .mobileExperienceSection.vpNutritionMobile .caseStudyTitle,
    .mobileExperienceSection.vpNutritionMobile .caseStudyText {
      color: #ffffff; } }
  .mobileExperienceSection.vpNutritionMobile .mobileContent {
    padding-top: 3.469vw; }
    @media only screen and (max-width: 991px) {
      .mobileExperienceSection.vpNutritionMobile .mobileContent {
        padding-top: 50px; } }
    @media only screen and (max-width: 640px) {
      .mobileExperienceSection.vpNutritionMobile .mobileContent {
        padding-top: 7.813vw; } }

.mobileScreenshotSection {
  background-color: #F9F9F9;
  padding: 4.531vw 0 2.2vw; }
  @media only screen and (max-width: 991px) {
    .mobileScreenshotSection {
      padding: 0; } }
  .mobileScreenshotSection .mobileScreenshotWrapper {
    max-width: 54.198vw;
    margin: 0 auto; }
    @media only screen and (max-width: 991px) {
      .mobileScreenshotSection .mobileScreenshotWrapper {
        max-width: 588px;
        margin: 0 0 0 auto; } }
    @media only screen and (max-width: 640px) {
      .mobileScreenshotSection .mobileScreenshotWrapper {
        max-width: 91.875vw; } }
  .mobileScreenshotSection.charlesDavidSSsection {
    background-color: #E0E0E0; }
  .mobileScreenshotSection.vpNutritionssSection {
    background-color: #121212; }
  .mobileScreenshotSection .mobileSliderWrapper {
    overflow: hidden; }
    @media only screen and (max-width: 991px) {
      .mobileScreenshotSection .mobileSliderWrapper {
        padding: 0 6.25vw 0 10.25vw; } }
    @media only screen and (max-width: 640px) {
      .mobileScreenshotSection .mobileSliderWrapper {
        padding: 0 6.25vw 0 10.25vw; } }
    .mobileScreenshotSection .mobileSliderWrapper .mobileSlider {
      width: 65%; }
    .mobileScreenshotSection .mobileSliderWrapper .slick-list {
      overflow: visible; }
      @media only screen and (max-width: 991px) {
        .mobileScreenshotSection .mobileSliderWrapper .slick-list {
          margin: 0; } }
      @media only screen and (max-width: 640px) {
        .mobileScreenshotSection .mobileSliderWrapper .slick-list {
          margin: 0; } }
      @media only screen and (max-width: 991px) {
        .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-track {
          padding: 106px 0 114px; } }
      @media only screen and (max-width: 640px) {
        .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-track {
          padding: 16.563vw 0 17.813vw; } }
      .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide {
        opacity: 0;
        transition: 0.5s linear;
        outline: none; }
        @media only screen and (max-width: 991px) {
          .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide {
            margin: 0 80px 0 0; } }
        @media only screen and (max-width: 640px) {
          .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide {
            margin: 0 9.813vw 0 0; } }
        .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide img {
          width: 100%;
          outline: none; }
          @media only screen and (max-width: 991px) {
            .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide img {
              box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15); } }
          @media only screen and (max-width: 640px) {
            .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide img {
              box-shadow: 0 0.781vw 3.906vw 0 rgba(0, 0, 0, 0.15); } }
      .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide.slick-current.slick-active {
        opacity: 1; }
      .mobileScreenshotSection .mobileSliderWrapper .slick-list .slick-slide.slick-current.slick-active + .slick-slide {
        opacity: 1; }

.tabViewsection {
  position: relative;
  padding-top: 5.938vw;
  padding-bottom: 5.208vw; }
  @media only screen and (max-width: 991px) {
    .tabViewsection {
      padding-top: 40px; } }
  @media only screen and (max-width: 640px) {
    .tabViewsection {
      padding-top: 6.250vw; } }
  .tabViewsection.maddox-marieTabView {
    background-color: #74E1ED;
    height: 42.542vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.maddox-marieTabView {
        height: 1054px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.maddox-marieTabView {
        height: 164.688vw; } }
  .tabViewsection.metabolic-nutritionTabView {
    background-color: #C00000;
    height: 41.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.metabolic-nutritionTabView {
        height: 1115px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.metabolic-nutritionTabView {
        height: 174.219vw; } }
    .tabViewsection.metabolic-nutritionTabView .tabContent .caseStudySubTitle,
    .tabViewsection.metabolic-nutritionTabView .tabContent .caseStudyTitle,
    .tabViewsection.metabolic-nutritionTabView .tabContent .caseStudyText {
      color: #ffffff; }
  .tabViewsection.charles1TabView {
    background-color: #E0F5FB;
    height: 41.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.charles1TabView {
        height: 1153px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.charles1TabView {
        height: 180.156vw; } }
  .tabViewsection.royal-enchantmentsTabView {
    background-color: #F8F5FA;
    height: 41.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.royal-enchantmentsTabView {
        height: 1033px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.royal-enchantmentsTabView {
        height: 151.406vw; } }
  .tabViewsection.charles-davidTabView {
    background-color: #567B97;
    height: 41.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.charles-davidTabView {
        height: 1083px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.charles-davidTabView {
        height: 157vw; } }
    .tabViewsection.charles-davidTabView .tabContent .caseStudySubTitle,
    .tabViewsection.charles-davidTabView .tabContent .caseStudyTitle,
    .tabViewsection.charles-davidTabView .tabContent .caseStudyText {
      color: #ffffff; }
  .tabViewsection.vinyl-mayhemTabView {
    background-color: #292323;
    height: 41.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.vinyl-mayhemTabView {
        height: 1095px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.vinyl-mayhemTabView {
        height: 151.094vw; } }
    .tabViewsection.vinyl-mayhemTabView .tabContent .caseStudySubTitle,
    .tabViewsection.vinyl-mayhemTabView .tabContent .caseStudyTitle,
    .tabViewsection.vinyl-mayhemTabView .tabContent .caseStudyText {
      color: #ffffff; }
  .tabViewsection.love-good-fatsTabView {
    background-color: #F9F0DB;
    height: 39.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.love-good-fatsTabView {
        height: 1045px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.love-good-fatsTabView {
        height: 155.281vw; } }
    .tabViewsection.love-good-fatsTabView .tabContent .caseStudySubTitle,
    .tabViewsection.love-good-fatsTabView .tabContent .caseStudyTitle,
    .tabViewsection.love-good-fatsTabView .tabContent .caseStudyText {
      color: #4D4949; }
  .tabViewsection.vp-nutritionTabView {
    background-color: #EE7B01;
    height: 42.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.vp-nutritionTabView {
        background-color: #56554F;
        height: 1045px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.vp-nutritionTabView {
        height: 165.281vw; } }
    .tabViewsection.vp-nutritionTabView .tabContent .caseStudySubTitle,
    .tabViewsection.vp-nutritionTabView .tabContent .caseStudyTitle,
    .tabViewsection.vp-nutritionTabView .tabContent .caseStudyText {
      color: #ffffff; }
  .tabViewsection.ofx-officeTabView {
    background-color: #02369D;
    height: 42.667vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection.ofx-officeTabView {
        height: 1045px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection.ofx-officeTabView {
        height: 153vw; } }
    .tabViewsection.ofx-officeTabView .tabContent .caseStudySubTitle,
    .tabViewsection.ofx-officeTabView .tabContent .caseStudyTitle,
    .tabViewsection.ofx-officeTabView .tabContent .caseStudyText {
      color: #ffffff; }
  .tabViewsection .tabImage {
    position: absolute;
    left: 0;
    top: 2.604vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection .tabImage {
        top: 512px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection .tabImage {
        top: 80vw; } }
    .tabViewsection .tabImage.maddox-marieTab {
      max-width: 41.5vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.maddox-marieTab {
          max-width: 580px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.maddox-marieTab {
          max-width: 90.625vw; } }
    .tabViewsection .tabImage.metabolic-nutritionTab {
      max-width: 35.5vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.metabolic-nutritionTab {
          top: 460px;
          max-width: 600px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.metabolic-nutritionTab {
          top: 71.875vw;
          max-width: 93.750vw; } }
    .tabViewsection .tabImage.charles1Tab {
      max-width: 37vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.charles1Tab {
          max-width: 600px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.charles1Tab {
          max-width: 93.750vw; } }
    .tabViewsection .tabImage.vinyl-mayhemTab {
      left: auto;
      right: 0;
      max-width: 42vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.vinyl-mayhemTab {
          top: 472px;
          max-width: 660px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.vinyl-mayhemTab {
          top: 71.750vw;
          max-width: 82.750vw; } }
    .tabViewsection .tabImage.charles-davidTab {
      left: auto;
      right: 0;
      max-width: 42vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.charles-davidTab {
          top: 472px;
          max-width: 660px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.charles-davidTab {
          top: 73.750vw;
          max-width: 86.750vw; } }
    .tabViewsection .tabImage.royal-enchantmentsTab {
      left: auto;
      right: 0;
      max-width: 42vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.royal-enchantmentsTab {
          top: 412px;
          max-width: 660px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.royal-enchantmentsTab {
          top: 62.5vw;
          max-width: 93.750vw; } }
    .tabViewsection .tabImage.love-good-fatsTab {
      max-width: 37vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.love-good-fatsTab {
          top: 470px;
          max-width: 600px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.love-good-fatsTab {
          top: 64.438vw;
          max-width: 93.750vw; } }
    .tabViewsection .tabImage.vp-nutritionTab {
      max-width: 37vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.vp-nutritionTab {
          top: 405px;
          max-width: 600px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.vp-nutritionTab {
          top: 63.281vw;
          max-width: 93.750vw; } }
    .tabViewsection .tabImage.ofx-officeTab {
      left: auto;
      right: 0;
      max-width: 42vw; }
      @media only screen and (max-width: 991px) {
        .tabViewsection .tabImage.ofx-officeTab {
          top: 425px;
          max-width: 660px; } }
      @media only screen and (max-width: 640px) {
        .tabViewsection .tabImage.ofx-officeTab {
          top: 66.406vw;
          max-width: 90.750vw; } }
  @media only screen and (max-width: 991px) {
    .tabViewsection .caseStudyText {
      font-size: 24px; } }
  @media only screen and (max-width: 640px) {
    .tabViewsection .caseStudyText {
      font-size: 3.70vw; } }
  .tabViewsection .caseStudyTitle {
    margin: 0.521vw 0 1.042vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection .caseStudyTitle {
        max-width: 572px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection .caseStudyTitle {
        max-width: 89.375vw; } }
  .tabViewsection .tabContent {
    max-width: 35.677vw; }
    @media only screen and (max-width: 991px) {
      .tabViewsection .tabContent {
        max-width: 572px; } }
    @media only screen and (max-width: 640px) {
      .tabViewsection .tabContent {
        max-width: 89.375vw; } }

@media only screen and (max-width: 991px) {
  .recentProjectSection .caseStudyTitle {
    margin: 0 auto 40px; } }
@media only screen and (max-width: 640px) {
  .recentProjectSection .caseStudyTitle {
    margin: 0 auto 6.250vw;
    font-size: 6.3vw; } }
.recentProjectSection.ourProject {
  padding: 5vw 0 7.813vw; }
  @media only screen and (max-width: 991px) {
    .recentProjectSection.ourProject {
      padding: 40px 0 0; } }
  @media only screen and (max-width: 640px) {
    .recentProjectSection.ourProject {
      padding: 6vw 0 0; } }
  .recentProjectSection.ourProject .waterfall {
    margin-top: 4.5vw; }
    @media only screen and (max-width: 991px) {
      .recentProjectSection.ourProject .waterfall {
        margin: 0; } }
    .recentProjectSection.ourProject .waterfall .item-img {
      padding-bottom: 0; }
      @media only screen and (max-width: 991px) {
        .recentProjectSection.ourProject .waterfall .item-img {
          margin: 0 0 70px; } }
      @media only screen and (max-width: 640px) {
        .recentProjectSection.ourProject .waterfall .item-img {
          margin: 0 0 10.938vw; } }
      .recentProjectSection.ourProject .waterfall .item-img .footer-title .siteName a {
        color: #000000; }
        .recentProjectSection.ourProject .waterfall .item-img .footer-title .siteName a svg g {
          fill: #000000; }
      .recentProjectSection.ourProject .waterfall .item-img .footer-title a .codingLang {
        color: #000000; }
.recentProjectSection .divider {
  background-color: #DDDDDD;
  height: 1px;
  width: 100%;
  margin: 4.5vw 0 4.5vw; }
  @media only screen and (max-width: 991px) {
    .recentProjectSection .divider {
      margin: 50px 0 40px; } }
  @media only screen and (max-width: 640px) {
    .recentProjectSection .divider {
      margin: 7.813vw 0 6.250vw; } }

@media only screen and (max-width: 991px) {
  .servicesHero {
    padding: 210px 0 40px; } }
.servicesHero .main-title h1 {
  font-size: 4.427vw;
  line-height: 5.260vw;
  margin-bottom: 0; }
  @media only screen and (max-width: 991px) {
    .servicesHero .main-title h1 {
      font-size: 75px;
      line-height: 94px;
      max-width: 575px; } }
  @media only screen and (max-width: 640px) {
    .servicesHero .main-title h1 {
      font-size: 11.719vw;
      line-height: 14.688vw; } }

.services-dec {
  padding: 4.584vw 0; }
  @media only screen and (max-width: 991px) {
    .services-dec {
      padding: 50px 0 35px; } }
  @media only screen and (min-width: 992px) {
    .services-dec .customRow {
      margin-left: -1.458vw;
      margin-right: -1.458vw; }
      .services-dec .customRow .col-lg-6 {
        padding: 0 1.458vw; } }
  .services-dec .customRow .dis p {
    color: #ffffff;
    font-family: "SequelLightBody", sans-serif;
    font-size: 1.458vw;
    line-height: 2.135vw;
    padding-bottom: 0.781vw; }
    @media only screen and (max-width: 991px) {
      .services-dec .customRow .dis p {
        font-size: 28px;
        line-height: 41px;
        padding-bottom: 15px; } }
    @media only screen and (max-width: 640px) {
      .services-dec .customRow .dis p {
        font-size: 4.375vw;
        line-height: 6.406vw;
        padding-bottom: 2.344vw; } }

.services {
  overflow: hidden;
  padding-top: 5.469vw;
  padding-bottom: 2.865vw;
  width: 100%; }
  @media only screen and (min-width: 992px) {
    .services {
      padding-right: 5.208vw; } }
  @media only screen and (max-width: 991px) {
    .services {
      padding-top: 43px;
      padding-bottom: 60px; }
      .services .customContainer {
        padding: 0 40px; } }
  @media only screen and (max-width: 640px) {
    .services .customContainer {
      padding: 0 6.250vw; } }
  @media only screen and (min-width: 992px) {
    .services .customRow {
      margin-left: -1.563vw;
      margin-right: -1.563vw; }
      .services .customRow .col-lg-4, .services .customRow .col-lg-8 {
        padding: 0 1.563vw; } }
  .services .customRow .title {
    padding-left: 5.208vw;
    margin-bottom: 4.583vw; }
    @media only screen and (max-width: 991px) {
      .services .customRow .title {
        padding-left: 0;
        margin-bottom: 40px; } }
    @media only screen and (max-width: 640px) {
      .services .customRow .title {
        margin-bottom: 6.250vw; } }
    .services .customRow .title.ourServiceTitle {
      margin-top: -0.625vw; }
      @media only screen and (max-width: 991px) {
        .services .customRow .title.ourServiceTitle {
          margin-top: 0; } }
    .services .customRow .title h2 {
      font-size: 4.427vw;
      line-height: 5.208vw; }
      @media only screen and (max-width: 991px) {
        .services .customRow .title h2 {
          font-size: 50px;
          line-height: 59px; } }
      @media only screen and (max-width: 640px) {
        .services .customRow .title h2 {
          font-size: 7.813vw;
          line-height: 9.219vw; } }
  .services .customRow .servicesDetail ul {
    margin-bottom: 0px; }
    .services .customRow .servicesDetail ul li {
      list-style: none;
      width: 50%; }
      @media only screen and (max-width: 991px) {
        .services .customRow .servicesDetail ul li {
          width: 100%; } }
      .services .customRow .servicesDetail ul li .innerContent {
        padding: 0 0.521vw; }
        @media only screen and (max-width: 991px) {
          .services .customRow .servicesDetail ul li .innerContent {
            padding: 0; } }
        .services .customRow .servicesDetail ul li .innerContent .icon {
          padding-right: 1.146vw;
          line-height: normal; }
          @media only screen and (max-width: 991px) {
            .services .customRow .servicesDetail ul li .innerContent .icon {
              padding-right: 21.88px; } }
          @media only screen and (max-width: 640px) {
            .services .customRow .servicesDetail ul li .innerContent .icon {
              padding-right: 3.419vw; } }
          .services .customRow .servicesDetail ul li .innerContent .icon i {
            color: #1D27C1;
            font-size: 1.302vw;
            line-height: 1.927vw;
            display: inherit; }
            @media only screen and (max-width: 991px) {
              .services .customRow .servicesDetail ul li .innerContent .icon i {
                font-size: 25px;
                line-height: 37px; } }
            @media only screen and (max-width: 640px) {
              .services .customRow .servicesDetail ul li .innerContent .icon i {
                font-size: 3.906vw;
                line-height: 5.781vw; } }
        .services .customRow .servicesDetail ul li .innerContent .content h3 {
          font-family: "SequelSemiBoldBody", sans-serif;
          font-size: 1.667vw;
          line-height: 1.927vw;
          margin-bottom: 1.458vw; }
          @media only screen and (max-width: 991px) {
            .services .customRow .servicesDetail ul li .innerContent .content h3 {
              font-size: 32px;
              line-height: 37px;
              margin-bottom: 15px; } }
          @media only screen and (max-width: 640px) {
            .services .customRow .servicesDetail ul li .innerContent .content h3 {
              font-size: 5vw;
              line-height: 5.781vw;
              margin-bottom: 2.344vw; } }
        .services .customRow .servicesDetail ul li .innerContent .content p {
          font-family: "SequelLightBody", sans-serif;
          font-size: 1.458vw;
          line-height: 1.875vw;
          margin-bottom: 2.344vw; }
          @media only screen and (max-width: 991px) {
            .services .customRow .servicesDetail ul li .innerContent .content p {
              font-size: 28px;
              line-height: 36px;
              margin-bottom: 50px; } }
          @media only screen and (max-width: 640px) {
            .services .customRow .servicesDetail ul li .innerContent .content p {
              font-size: 4.375vw;
              line-height: 5.625vw;
              margin-bottom: 7.813vw; } }
        .services .customRow .servicesDetail ul li .innerContent .btn-them {
          text-transform: capitalize;
          font-size: 1.354vw;
          line-height: 1.563vw;
          letter-spacing: 0.026vw;
          padding: 1.719vw 1.597vw;
          margin-left: 2.448vw;
          margin-top: 5.938vw;
          border: 2px solid #F3E074; }
          @media only screen and (max-width: 991px) {
            .services .customRow .servicesDetail ul li .innerContent .btn-them {
              font-size: 26px;
              line-height: 30px;
              letter-spacing: 0.49px;
              padding: 33px 30.7px;
              margin-left: 0;
              margin-top: 30px; } }
          @media only screen and (max-width: 640px) {
            .services .customRow .servicesDetail ul li .innerContent .btn-them {
              font-size: 4.063vw;
              line-height: 4.688vw;
              letter-spacing: 0.077vw;
              padding: 5.156vw 4.797vw;
              margin-top: 4.688vw; } }
          .services .customRow .servicesDetail ul li .innerContent .btn-them svg {
            width: 1.615vw;
            margin-left: 1.615vw; }
            @media only screen and (max-width: 991px) {
              .services .customRow .servicesDetail ul li .innerContent .btn-them svg {
                width: 31px;
                margin-left: 31px; } }
            @media only screen and (max-width: 640px) {
              .services .customRow .servicesDetail ul li .innerContent .btn-them svg {
                width: 4.844vw;
                margin-left: 4.844vw; } }
      .services .customRow .servicesDetail ul li:last-child div {
        text-align: center; }
    @media only screen and (min-width: 992px) {
      .services .customRow .servicesDetail ul {
        margin-left: -1.563vw;
        margin-right: -1.563vw; }
        .services .customRow .servicesDetail ul li {
          padding: 0 1.563vw; } }

.customDesign {
  width: 100%;
  overflow: hidden;
  padding: 6.370vw 0 3.438vw; }
  @media only screen and (max-width: 991px) {
    .customDesign {
      padding: 60px 0 120px; } }
  .customDesign .custom-padding {
    padding-left: 5.208vw;
    width: 100%; }
    @media only screen and (max-width: 991px) {
      .customDesign .custom-padding {
        padding: 0 40px; } }
    @media only screen and (max-width: 640px) {
      .customDesign .custom-padding {
        padding: 0 6.250vw; } }
    @media only screen and (min-width: 992px) {
      .customDesign .custom-padding .customRow {
        margin-left: -2.526vw;
        margin-right: -2.526vw; }
        .customDesign .custom-padding .customRow .col-lg-7, .customDesign .custom-padding .customRow .col-lg-5 {
          padding-left: 2.526vw;
          padding-right: 2.526vw; } }
    .customDesign .custom-padding .customRow .title h2 {
      color: #ffffff;
      font-size: 4.427vw;
      line-height: 5.208vw;
      margin-bottom: 3.906vw; }
      @media only screen and (max-width: 991px) {
        .customDesign .custom-padding .customRow .title h2 {
          font-size: 50px;
          line-height: 59px;
          margin-bottom: 60px; } }
      @media only screen and (max-width: 640px) {
        .customDesign .custom-padding .customRow .title h2 {
          font-size: 7.813vw;
          line-height: 9.219vw;
          margin-bottom: 9.375vw; } }
    .customDesign .custom-padding .customRow .content {
      margin-bottom: 2.604vw; }
      @media only screen and (max-width: 991px) {
        .customDesign .custom-padding .customRow .content {
          margin-bottom: 50px; } }
      @media only screen and (max-width: 640px) {
        .customDesign .custom-padding .customRow .content {
          margin-bottom: 7.813vw; } }
      .customDesign .custom-padding .customRow .content h2 {
        font-family: "SequelSemiBoldBody", sans-serif;
        color: #ffffff;
        font-size: 1.667vw;
        line-height: 1.927vw;
        margin-bottom: 0.729vw; }
        @media only screen and (max-width: 991px) {
          .customDesign .custom-padding .customRow .content h2 {
            font-size: 32px;
            line-height: 37px;
            margin-bottom: 14px; } }
        @media only screen and (max-width: 640px) {
          .customDesign .custom-padding .customRow .content h2 {
            font-size: 5vw;
            line-height: 5.781vw;
            margin-bottom: 2.188vw; } }
      .customDesign .custom-padding .customRow .content p {
        font-family: "SequelLightBody", sans-serif;
        color: #ffffff;
        font-size: 1.458vw;
        line-height: 1.875vw; }
        @media only screen and (max-width: 991px) {
          .customDesign .custom-padding .customRow .content p {
            font-size: 28px;
            line-height: 36px;
            margin-bottom: 50px; } }
        @media only screen and (max-width: 640px) {
          .customDesign .custom-padding .customRow .content p {
            font-size: 4.375vw;
            line-height: 5.625vw;
            margin-bottom: 7.813vw; } }
    .customDesign .custom-padding .customRow .mb-img {
      padding-left: 4.425vw; }
      .customDesign .custom-padding .customRow .mb-img img {
        max-width: 19.115vw; }
    .customDesign .custom-padding .customRow .desktop-img {
      margin-top: 11.533vw; }
      .customDesign .custom-padding .customRow .desktop-img img {
        max-width: 100%; }
    .customDesign .custom-padding .customRow .tablet-img {
      margin-top: 10.502vw; }
      .customDesign .custom-padding .customRow .tablet-img img {
        max-width: 34.635vw; }
    .customDesign .custom-padding .customRow .mbDevice {
      position: relative; }
      @media only screen and (max-width: 991px) {
        .customDesign .custom-padding .customRow .mbDevice {
          margin-bottom: 135px; } }
      @media only screen and (max-width: 640px) {
        .customDesign .custom-padding .customRow .mbDevice {
          margin-bottom: 21.094vw; } }
      .customDesign .custom-padding .customRow .mbDevice .macbook {
        padding-right: 5%; }
      .customDesign .custom-padding .customRow .mbDevice .mobile {
        position: absolute;
        width: 27.8%;
        top: 22%;
        right: 0; }
  .customDesign .getStarted-btn {
    text-align: center;
    margin-top: 0.729vw; }
    @media only screen and (max-width: 991px) {
      .customDesign .getStarted-btn {
        margin-top: 50px; } }
    @media only screen and (max-width: 640px) {
      .customDesign .getStarted-btn {
        margin-top: 7.813vw; } }
    .customDesign .getStarted-btn .btn-them {
      text-transform: capitalize;
      font-size: 1.354vw;
      line-height: 1.563vw;
      letter-spacing: 0.026vw;
      padding: 1.719vw 1.597vw; }
      @media only screen and (max-width: 991px) {
        .customDesign .getStarted-btn .btn-them {
          font-size: 26px;
          line-height: 30px;
          letter-spacing: 0.49px;
          padding: 33px 30.7px; } }
      @media only screen and (max-width: 640px) {
        .customDesign .getStarted-btn .btn-them {
          font-size: 4.063vw;
          line-height: 4.688vw;
          letter-spacing: 0.077vw;
          padding: 5.156vw 4.797vw; } }
      .customDesign .getStarted-btn .btn-them svg {
        width: 1.615vw;
        margin-left: 1.615vw; }
        @media only screen and (max-width: 991px) {
          .customDesign .getStarted-btn .btn-them svg {
            width: 31px;
            margin-left: 31px; } }
        @media only screen and (max-width: 640px) {
          .customDesign .getStarted-btn .btn-them svg {
            width: 4.844vw;
            margin-left: 4.844vw; } }

.blogHero {
  transition: all 0.5s;
  padding-top: 12.365vw;
  padding-bottom: 0; }
  @media only screen and (max-width: 991px) {
    .blogHero {
      padding-top: 200px; } }
  @media only screen and (max-width: 640px) {
    .blogHero {
      padding-top: 31.250vw; } }
  .blogHero .main-title {
    margin-bottom: 4.167vw; }
    .blogHero .main-title h1 {
      font-size: 4.427vw;
      line-height: 5.208vw; }
      @media only screen and (max-width: 991px) {
        .blogHero .main-title h1 {
          font-size: 61px;
          line-height: 74px;
          max-width: 560px; } }
      @media only screen and (max-width: 640px) {
        .blogHero .main-title h1 {
          font-size: 9.531vw;
          line-height: 11.563vw;
          max-width: 87.500vw; } }
  .blogHero .tab-box {
    width: 100%;
    padding-left: 5.208vw; }
    .blogHero .tab-box ul {
      display: flex;
      list-style: none;
      width: 100%;
      overflow: auto; }
      .blogHero .tab-box ul li {
        color: #ffffff; }

.sectionTabBox .tabWrapper {
  padding-bottom: 2.604vw; }
  @media only screen and (max-width: 991px) {
    .sectionTabBox .tabWrapper {
      padding-bottom: 30px; } }
  @media only screen and (max-width: 640px) {
    .sectionTabBox .tabWrapper {
      padding-bottom: 4.688vw; } }
  @media only screen and (max-width: 991px) {
    .sectionTabBox .tabWrapper .container {
      overflow-x: auto; } }
  .sectionTabBox .tabWrapper .nav-tabs {
    border-bottom: 1px solid #ffffff;
    padding-bottom: 1.302vw; }
    @media only screen and (max-width: 991px) {
      .sectionTabBox .tabWrapper .nav-tabs {
        padding-bottom: 15px;
        width: 1230px; } }
    @media only screen and (max-width: 640px) {
      .sectionTabBox .tabWrapper .nav-tabs {
        padding-bottom: 2.344vw;
        width: 192.188vw; } }
    .sectionTabBox .tabWrapper .nav-tabs .nav-item {
      padding: 0 1.510vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabWrapper .nav-tabs .nav-item {
          padding: 0 15px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabWrapper .nav-tabs .nav-item {
          padding: 0 2.344vw; } }
      .sectionTabBox .tabWrapper .nav-tabs .nav-item .nav-link {
        color: #ffffff;
        background-color: transparent;
        font-family: "SequelRomanHead", sans-serif;
        border: none;
        padding: 0;
        font-size: 0.938vw; }
        @media only screen and (max-width: 991px) {
          .sectionTabBox .tabWrapper .nav-tabs .nav-item .nav-link {
            font-size: 24px; } }
        @media only screen and (max-width: 640px) {
          .sectionTabBox .tabWrapper .nav-tabs .nav-item .nav-link {
            font-size: 3.750vw; } }
        .sectionTabBox .tabWrapper .nav-tabs .nav-item .nav-link.active {
          background-color: transparent;
          color: #F7DF5F; }
.sectionTabBox .tabContentWrapper {
  padding: 2.604vw 0 5.208vw; }
  @media only screen and (max-width: 991px) {
    .sectionTabBox .tabContentWrapper {
      padding: 50px 0 100px; } }
  @media only screen and (max-width: 640px) {
    .sectionTabBox .tabContentWrapper {
      padding: 7.813vw 0 15.625vw; } }
  .sectionTabBox .tabContentWrapper .rowWrapper .cRow {
    margin: 0 -1.458vw; }
    .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-7,
    .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-5,
    .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-4 {
      padding-right: 1.458vw;
      padding-left: 1.458vw;
      margin-bottom: 2.135vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-7,
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-5,
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-4 {
          margin-bottom: 43px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-7,
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-5,
        .sectionTabBox .tabContentWrapper .rowWrapper .cRow .col-lg-4 {
          margin-bottom: 6.719vw; } }
  .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper {
    background-color: #ffffff;
    -moz-box-shadow: 0.15px 0.15px 28px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0.15px 0.15px 28px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0.15px 0.15px 28px 0 rgba(0, 0, 0, 0.1); }
    .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .imgWrapper {
      width: 100%;
      height: 14.427vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .imgWrapper {
          height: 365px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .imgWrapper {
          height: 57.031vw; } }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .imgWrapper img {
        object-fit: cover;
        height: 100%;
        width: 100%; }
    .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper.bigCard .imgWrapper {
      height: 21.302vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper.bigCard .imgWrapper {
          height: 365px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper.bigCard .imgWrapper {
          height: 57.031vw; } }
    .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper {
      padding: 0.781vw 3.073vw 1.042vw 1.719vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper {
          padding: 20px 24px 27.05px 23px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper {
          padding: 3.125vw 3.750vw 4.227vw 3.594vw; } }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; }
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag {
          border-radius: 50px;
          font-size: 0.689vw;
          line-height: 0.689vw;
          margin: 0.260vw 0.729vw 0.260vw 0;
          padding: 0.602vw 0.833vw 0.521vw 0.781vw; }
          @media only screen and (max-width: 991px) {
            .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag {
              padding: 12.23px 23.14px 15.77px 22.92px;
              font-size: 20.24px;
              line-height: 20.24px;
              margin: 5px 22.2px 5px 0; } }
          @media only screen and (max-width: 640px) {
            .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag {
              padding: 1.911vw 3.616vw 2.464vw 3.581vw;
              font-size: 3.162vw;
              line-height: 3.162vw;
              margin: 0.781vw 3.469vw 0.781vw 0; } }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.purpleTag {
            color: #B350ED;
            background-color: #F6ECFD; }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.blueTag {
            color: #4090D8;
            background-color: #E8F4FB; }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.blueTag2 {
            color: #667EE7;
            background-color: rgba(72, 106, 255, 0.1); }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.redTag {
            color: #E33900;
            background-color: #FFE7E2; }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.greenTag {
            color: #3C9B0E;
            background-color: rgba(139, 217, 101, 0.15); }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.greenTag2 {
            color: #049D85;
            background-color: #E9F9F8; }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .tagWrapper .cTag.orangeTag {
            color: #E58D0B;
            background-color: #FFF3E2; }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle1,
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle2 {
        font-family: "SequelMediumHead", sans-serif;
        overflow: hidden;
        color: #121212; }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle1 {
        overflow: hidden;
        margin: 0.625vw 0 1.042vw;
        height: 4.740vw;
        font-size: 2.083vw;
        line-height: 2.344vw; }
        @media only screen and (max-width: 991px) {
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle1 {
            margin: 25px 0 0;
            height: 80px;
            font-size: 32px;
            line-height: 40px; } }
        @media only screen and (max-width: 640px) {
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle1 {
            margin: 3.906vw 0 0;
            height: 12.500vw;
            font-size: 5vw;
            line-height: 6.250vw; } }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle2 {
        margin: 0.625vw 0 1.042vw;
        height: 3.125vw;
        font-size: 1.250vw;
        line-height: 1.563vw; }
        @media only screen and (max-width: 991px) {
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle2 {
            margin: 25px 0 0;
            height: 80px;
            font-size: 32px;
            line-height: 40px; } }
        @media only screen and (max-width: 640px) {
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .blogTitle2 {
            margin: 3.906vw 0 0;
            height: 12.500vw;
            font-size: 5vw;
            line-height: 6.250vw; } }
      .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper {
        display: flex;
        flex-direction: row; }
        @media only screen and (max-width: 991px) {
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper {
            display: none; } }
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper .date,
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper .time {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 0.729vw;
          color: #7A86A3; }
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper .date img,
          .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper .time img {
            width: 0.729vw;
            margin-right: 0.469vw; }
        .sectionTabBox .tabContentWrapper .rowWrapper .cardWrapper .contentWrapper .dateTimeWrapper .date {
          margin-right: 0.842vw; }
  .sectionTabBox .tabContentWrapper .rowWrapper .btn-them {
    text-transform: capitalize;
    margin-top: 1.250vw;
    padding: 1.198vw 2.760vw 1.302vw;
    font-size: 0.938vw; }
    @media only screen and (max-width: 991px) {
      .sectionTabBox .tabContentWrapper .rowWrapper .btn-them {
        padding: 25px 60.29px;
        font-size: 25.71px;
        margin-top: 75px; } }
    @media only screen and (max-width: 640px) {
      .sectionTabBox .tabContentWrapper .rowWrapper .btn-them {
        padding: 5.156vw 12.545vw;
        font-size: 4.017vw;
        margin-top: 11.719vw; } }
    .sectionTabBox .tabContentWrapper .rowWrapper .btn-them svg {
      margin-right: 0.521vw;
      width: 0.964vw; }
      @media only screen and (max-width: 991px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .btn-them svg {
          margin-right: 20.78px;
          width: 26.71px; } }
      @media only screen and (max-width: 640px) {
        .sectionTabBox .tabContentWrapper .rowWrapper .btn-them svg {
          margin-right: 3.247vw;
          width: 4.173vw; } }

.loadMoreBtn {
  font-family: "SequelRomanHead", sans-serif;
  color: #121212 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.34px;
  border-radius: 3px;
  padding: 0.521vw !important;
  width: 12.448vw;
  height: 3.646vw; }
  @media only screen and (max-width: 991px) {
    .loadMoreBtn {
      padding: 10px !important;
      width: 346px;
      height: 96px; } }
  @media only screen and (max-width: 640px) {
    .loadMoreBtn {
      padding: 1.563vw !important;
      width: 54.063vw;
      height: 15vw; } }
  .loadMoreBtn img {
    max-width: 0.938vw;
    margin-right: 1.133vw; }
    @media only screen and (max-width: 991px) {
      .loadMoreBtn img {
        max-width: 26.71px;
        margin-right: 30.78px; } }
    @media only screen and (max-width: 640px) {
      .loadMoreBtn img {
        max-width: 4.173vw;
        margin-right: 4.809vw; } }

/* ----------------------- blog inner style start ---------------------------------- */
.blogpageWrapper .heroSection .blogTagWrapper {
  padding-bottom: 5.208vw; }
  @media only screen and (max-width: 991px) {
    .blogpageWrapper .heroSection .blogTagWrapper {
      padding-bottom: 67px; } }
  @media only screen and (max-width: 640px) {
    .blogpageWrapper .heroSection .blogTagWrapper {
      padding-bottom: 10.469vw; } }
  .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper {
    display: flex;
    flex-direction: row; }
    .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag {
      border-radius: 50px;
      font-size: 0.689vw;
      line-height: 0.689vw;
      margin-right: 0.729vw;
      padding: 0.602vw 0.833vw 0.521vw 0.781vw; }
      @media only screen and (max-width: 991px) {
        .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag {
          padding: 12.61px 24.08px 16.39px 24px;
          font-size: 21.17px;
          line-height: 21.17px;
          margin-right: 23.92px; } }
      @media only screen and (max-width: 640px) {
        .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag {
          padding: 1.970vw 3.762vw 2.561vw 3.750vw;
          font-size: 3.308vw;
          line-height: 3.308vw;
          margin-right: 3.738vw; } }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.purpleTag {
        color: #B350ED;
        background-color: #F8ECFE; }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.blueTag {
        color: #4090D8;
        background-color: #E8F4FB; }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.blueTag2 {
        color: #667EE7;
        background-color: rgba(72, 106, 255, 0.1); }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.redTag {
        color: #E33900;
        background-color: #FFE7E2; }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.greenTag {
        color: #3C9B0E;
        background-color: #EAFAE6; }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.greenTag2 {
        color: #049D85;
        background-color: #E9F9F8; }
      .blogpageWrapper .heroSection .blogTagWrapper .tagWrapper .cTag.orangeTag {
        color: #E58D0B;
        background-color: #FFF3E2; }
  .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo {
    position: relative;
    bottom: -1.042vw; }
    @media only screen and (max-width: 991px) {
      .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo {
        bottom: 0; } }
    .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userImg {
      max-width: 3.125vw;
      margin-right: 1.094vw; }
      @media only screen and (max-width: 991px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userImg {
          max-width: 108px;
          margin-right: 41px; } }
      @media only screen and (max-width: 640px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userImg {
          max-width: 16.875vw;
          margin-right: 6.406vw; } }
    .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .userName {
      font-family: "SequelMediumBody", sans-serif;
      color: #ffffff;
      font-size: 1.042vw;
      line-height: 1.042vw;
      margin-bottom: 1vw; }
      @media only screen and (max-width: 991px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .userName {
          font-size: 26px;
          line-height: 54px;
          margin-bottom: 0; } }
      @media only screen and (max-width: 640px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .userName {
          font-size: 4.063vw;
          line-height: 8.438vw;
          margin-bottom: 0; } }
    .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .readingTime {
      font-family: "SequelLightBody", sans-serif;
      color: #ffffff;
      font-size: 0.729vw;
      line-height: 0.729vw; }
      @media only screen and (max-width: 991px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .readingTime {
          font-size: 24px;
          line-height: 29px; } }
      @media only screen and (max-width: 640px) {
        .blogpageWrapper .heroSection .blogTagWrapper .blogUserInfo .userInfo .readingTime {
          font-size: 3.750vw;
          line-height: 4.531vw; } }
  .blogpageWrapper .heroSection .blogTagWrapper .main-title {
    margin: 0; }
    .blogpageWrapper .heroSection .blogTagWrapper .main-title h1 {
      font-size: 4.427vw;
      line-height: 4.427vw;
      margin: 1.204vw 0 0; }
      @media only screen and (max-width: 991px) {
        .blogpageWrapper .heroSection .blogTagWrapper .main-title h1 {
          font-size: 50px;
          line-height: 66px;
          margin: 27.3px 0 40px;
          max-width: 510px; } }
      @media only screen and (max-width: 640px) {
        .blogpageWrapper .heroSection .blogTagWrapper .main-title h1 {
          font-size: 7.813vw;
          line-height: 10.313vw;
          margin: 4.266vw 0 6.250vw;
          max-width: 79.688vw; } }

.sectionBlogContent {
  transition: all 0.5s;
  background-color: #ffffff;
  padding: 2.604vw 0 10.052vw; }
  @media only screen and (max-width: 991px) {
    .sectionBlogContent {
      position: relative;
      padding: 125px 0 120px; } }
  @media only screen and (max-width: 640px) {
    .sectionBlogContent {
      padding: 18.969vw 0 18.750vw; } }
  .sectionBlogContent .col-lg-1,
  .sectionBlogContent .col-lg-6,
  .sectionBlogContent .col-lg-2 {
    padding: 0; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .col-lg-1,
      .sectionBlogContent .col-lg-6,
      .sectionBlogContent .col-lg-2 {
        padding: 0 15px; } }
  .sectionBlogContent .socialIconWrapper {
    position: relative; }
    .sectionBlogContent .socialIconWrapper .socialIcon {
      position: sticky;
      top: 9.643vw; }
      .sectionBlogContent .socialIconWrapper .socialIcon a {
        display: block;
        margin-bottom: 1.302vw; }
        .sectionBlogContent .socialIconWrapper .socialIcon a i {
          color: #949494;
          font-size: 1.042vw; }
      .sectionBlogContent .socialIconWrapper .socialIcon .share {
        font-family: "SequelBoldBody", sans-serif;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        color: #444444;
        transform: rotate(180deg);
        font-size: 0.677vw;
        line-height: 0.677vw; }
  .sectionBlogContent .blogContentText h1, .sectionBlogContent .blogContentText h2, .sectionBlogContent .blogContentText h3, .sectionBlogContent .blogContentText h4, .sectionBlogContent .blogContentText h5, .sectionBlogContent .blogContentText h6 {
    transition: all 0.5s;
    color: #121212;
    font-family: "SequelMediumBody", sans-serif;
    font-size: 1.354vw;
    margin-bottom: 0.885vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText h1, .sectionBlogContent .blogContentText h2, .sectionBlogContent .blogContentText h3, .sectionBlogContent .blogContentText h4, .sectionBlogContent .blogContentText h5, .sectionBlogContent .blogContentText h6 {
        font-size: 32px;
        line-height: 37px;
        margin-bottom: 42px;
        max-width: 500px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText h1, .sectionBlogContent .blogContentText h2, .sectionBlogContent .blogContentText h3, .sectionBlogContent .blogContentText h4, .sectionBlogContent .blogContentText h5, .sectionBlogContent .blogContentText h6 {
        font-size: 5vw;
        line-height: 5.781vw;
        margin-bottom: 8.906vw;
        max-width: 78.125vw; } }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText h1.title1, .sectionBlogContent .blogContentText h2.title1, .sectionBlogContent .blogContentText h3.title1, .sectionBlogContent .blogContentText h4.title1, .sectionBlogContent .blogContentText h5.title1, .sectionBlogContent .blogContentText h6.title1 {
        font-size: 50px;
        line-height: 59px;
        margin-bottom: 57px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText h1.title1, .sectionBlogContent .blogContentText h2.title1, .sectionBlogContent .blogContentText h3.title1, .sectionBlogContent .blogContentText h4.title1, .sectionBlogContent .blogContentText h5.title1, .sectionBlogContent .blogContentText h6.title1 {
        font-size: 7.813vw;
        line-height: 9.219vw;
        margin-bottom: 8.906vw; } }
  .sectionBlogContent .blogContentText p {
    transition: all 0.5s;
    color: #2C2C2C;
    font-family: "SequelLightBody", sans-serif;
    font-size: 1.094vw;
    line-height: 1.875vw;
    margin-bottom: 2.604vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText p {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 30px;
        max-width: 556px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText p {
        font-size: 4.375vw;
        line-height: 5.625vw;
        margin-bottom: 4.688vw;
        max-width: 86.875vw; } }
  .sectionBlogContent .blogContentText .blockquoteWrapper {
    position: relative;
    margin-bottom: 2.917vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText .blockquoteWrapper {
        margin-bottom: 43px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText .blockquoteWrapper {
        margin-bottom: 6.719vw; } }
    .sectionBlogContent .blogContentText .blockquoteWrapper blockquote {
      border-left: 0.260vw solid #486AFF;
      padding-left: 1.198vw;
      margin-left: 3.177vw; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .blockquoteWrapper blockquote {
          padding-left: 23px;
          margin-left: 61px;
          max-width: 500px; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .blogContentText .blockquoteWrapper blockquote {
          padding-left: 3.594vw;
          margin-left: 9.531vw;
          max-width: 78.125vw; } }
      .sectionBlogContent .blogContentText .blockquoteWrapper blockquote::before {
        position: absolute;
        color: #486AFF;
        content: '"';
        font-family: "SequelSemiBoldBody", sans-serif;
        font-style: italic;
        font-size: 4.583vw;
        line-height: 4.583vw;
        left: -0.260vw;
        top: -0.365vw; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .blockquoteWrapper blockquote::before {
            font-size: 88px;
            line-height: 104px;
            left: -10px;
            top: -15px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .blockquoteWrapper blockquote::before {
            font-size: 13.750vw;
            line-height: 16.250vw;
            left: -1.563vw;
            top: -2.344vw; } }
      .sectionBlogContent .blogContentText .blockquoteWrapper blockquote p {
        font-family: "SequelMediumHead", sans-serif;
        font-style: italic;
        font-size: 2.604vw;
        line-height: 3.021vw;
        color: #000000; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .blockquoteWrapper blockquote p {
            font-size: 40px;
            line-height: 50px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .blockquoteWrapper blockquote p {
            font-size: 6.250vw;
            line-height: 7.813vw; } }
  .sectionBlogContent .blogContentText .videoWrapper {
    margin: 5.167vw 0 3vw; }
  .sectionBlogContent .blogContentText .tagContentWrapper {
    margin-top: 5.365vw;
    padding-bottom: 2.083vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText .tagContentWrapper {
        margin-top: 62px;
        padding-bottom: 69px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText .tagContentWrapper {
        margin-top: 9.688vw;
        padding-bottom: 10.781vw; } }
    .sectionBlogContent .blogContentText .tagContentWrapper .tagTitle {
      font-family: "SequelBoldBody", sans-serif;
      color: #444444;
      font-size: 0.729vw;
      margin-right: 2.031vw;
      line-height: 0;
      margin-bottom: 0; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .tagContentWrapper .tagTitle {
          font-size: 23.8px;
          margin-right: 67px; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .blogContentText .tagContentWrapper .tagTitle {
          font-size: 3.719vw;
          margin-right: 10.469vw; } }
    .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper {
      display: flex;
      flex-direction: row; }
      .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag {
        border-radius: 50px;
        font-size: 0.689vw;
        line-height: 0.689vw;
        margin: 0.260vw 0.729vw 0.260vw 0;
        padding: 0.602vw 0.833vw 0.521vw 0.781vw; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag {
            padding: 12.23px 23.14px 15.77px 22.92px;
            font-size: 20.24px;
            line-height: 20.24px;
            margin: 5px 22.2px 5px 0; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag {
            padding: 1.911vw 3.616vw 2.464vw 3.581vw;
            font-size: 3.162vw;
            line-height: 3.162vw;
            margin: 0.781vw 3.469vw 0.781vw 0; } }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.purpleTag {
          color: #B350ED;
          background-color: #F8ECFE; }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.blueTag {
          color: #4090D8;
          background-color: #E8F4FB; }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.blueTag2 {
          color: #667EE7;
          background-color: rgba(72, 106, 255, 0.1); }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.redTag {
          color: #E33900;
          background-color: #FFE7E2; }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.greenTag {
          color: #3C9B0E;
          background-color: #EAFAE6; }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.greenTag2 {
          color: #049D85;
          background-color: #E9F9F8; }
        .sectionBlogContent .blogContentText .tagContentWrapper .tagWrapper .cTag.orangeTag {
          color: #E58D0B;
          background-color: #FFF3E2; }
  .sectionBlogContent .blogContentText .userInfoSocial {
    border-top: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7;
    padding: 1.250vw 0 2.292vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .blogContentText .userInfoSocial {
        padding: 50px 0; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .blogContentText .userInfoSocial {
        padding: 7.813vw 0; } }
    .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo {
      margin-top: 0.729vw; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo {
          margin-top: 0; } }
      .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userImg {
        max-width: 3.125vw;
        margin-right: 1.094vw; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userImg {
            max-width: 108px;
            margin-right: 41px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userImg {
            max-width: 16.875vw;
            margin-right: 6.406vw; } }
      .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .userName {
        font-family: "SequelMediumBody", sans-serif;
        color: #444444;
        font-size: 1.042vw;
        line-height: 1.042vw;
        margin-bottom: 1vw; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .userName {
            font-size: 26px;
            line-height: 54px;
            margin-bottom: 0; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .userName {
            font-size: 4.063vw;
            line-height: 8.438vw;
            margin-bottom: 0; } }
      .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .readingTime {
        font-family: "SequelLightBody", sans-serif;
        color: #444444;
        font-size: 0.729vw;
        line-height: 0.729vw;
        margin-bottom: 0; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .readingTime {
            font-size: 24px;
            line-height: 29px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .readingTime {
            font-size: 3.750vw;
            line-height: 4.531vw; } }
    .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .shareText {
      color: #828282;
      text-align: right;
      font-size: 0.625vw;
      margin-bottom: 0.729vw; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .shareText {
          text-align: left;
          font-size: 20.4px;
          margin: 50px 0 23.6px; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .shareText {
          font-size: 3.187vw;
          margin: 7.813vw 0 3.688vw; } }
    .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li {
      margin-left: 1.667vw; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li {
          margin: 0 54px 0 0; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li {
          margin: 0 8.438vw 0 0; } }
      .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li:last-child {
        margin-right: 0; }
      .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li i {
        color: #828282;
        font-size: 1.042vw; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li i {
            font-size: 33px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .userInfoSocial .socialIcons .socialIcon li i {
            font-size: 5.156vw; } }
  .sectionBlogContent .blogContentText .btnWrapper {
    display: flex; }
    .sectionBlogContent .blogContentText .btnWrapper .backBtn {
      font-family: "SequelRomanHead", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      border: 2px solid #486AFF;
      font-size: 0.938vw;
      height: 3.021vw;
      width: 7.031vw;
      margin-top: 2.396vw;
      color: #444444; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .blogContentText .btnWrapper .backBtn {
          border: 3px solid #486AFF;
          font-size: 32px;
          line-height: 32px;
          height: 96px;
          width: 232.89px;
          margin-top: 70px; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .blogContentText .btnWrapper .backBtn {
          border: 0.469vw solid #486AFF;
          font-size: 5vw;
          line-height: 5vw;
          height: 15vw;
          width: 36.389vw;
          margin-top: 10.938vw; } }
      .sectionBlogContent .blogContentText .btnWrapper .backBtn svg {
        transform: rotate(180deg);
        width: 1.198vw;
        height: 0.521vw;
        margin-right: 1.042vw;
        color: #444444; }
        @media only screen and (max-width: 991px) {
          .sectionBlogContent .blogContentText .btnWrapper .backBtn svg {
            width: 40.89px;
            height: 17.78px;
            margin-right: 35.55px; } }
        @media only screen and (max-width: 640px) {
          .sectionBlogContent .blogContentText .btnWrapper .backBtn svg {
            width: 6.389vw;
            height: 2.778vw;
            margin-right: 5.555vw; } }
  .sectionBlogContent .mainSwitchWrapper {
    position: relative;
    height: 100%; }
  .sectionBlogContent .mainSwitch {
    position: sticky;
    top: 9.643vw; }
  @media only screen and (max-width: 991px) {
    .sectionBlogContent .darkModeWrapper {
      position: absolute;
      background-color: #D8D8D8;
      right: 0;
      top: 13px;
      padding: 16px 19px 20px 20px;
      border-radius: 15px 0 0 15px; } }
  @media only screen and (max-width: 640px) {
    .sectionBlogContent .darkModeWrapper {
      top: 2.031vw;
      padding: 2.500vw 2.969vw 3.125vw 3.125vw;
      border-radius: 2.344vw 0 0 2.344vw; } }
  .sectionBlogContent .darkModeWrapper .switchText {
    transition: all 0.5s;
    color: #000000;
    font-family: "SequelSemiBoldBody", sans-serif;
    text-transform: uppercase;
    font-size: 0.813vw;
    margin-right: 0.536vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .darkModeWrapper .switchText {
        font-size: 24px;
        margin-right: 11px;
        line-height: 29px;
        max-width: 78px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .darkModeWrapper .switchText {
        font-size: 3.750vw;
        margin-right: 1.719vw;
        line-height: 4.531vw;
        max-width: 12.188vw; } }
  .sectionBlogContent .darkModeWrapper .switchWrapper .switch {
    display: inline-block;
    position: relative;
    height: 1.354vw;
    width: 2.573vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper .switch {
        height: 47px;
        width: 89px;
        margin: 0; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper .switch {
        height: 7.344vw;
        width: 13.906vw; } }
    .sectionBlogContent .darkModeWrapper .switchWrapper .switch input {
      display: none; }
  .sectionBlogContent .darkModeWrapper .switchWrapper .slider {
    background-color: #747474;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s; }
    .sectionBlogContent .darkModeWrapper .switchWrapper .slider:before {
      background-color: #fff;
      bottom: 0.208vw;
      content: "";
      left: 0.250vw;
      position: absolute;
      transition: .4s;
      height: 0.948vw;
      width: 0.948vw; }
      @media only screen and (max-width: 991px) {
        .sectionBlogContent .darkModeWrapper .switchWrapper .slider:before {
          height: 33px;
          width: 33px;
          left: 6px;
          bottom: 7px; } }
      @media only screen and (max-width: 640px) {
        .sectionBlogContent .darkModeWrapper .switchWrapper .slider:before {
          height: 5.156vw;
          width: 5.156vw;
          left: 0.938vw;
          bottom: 1.094vw; } }
  .sectionBlogContent .darkModeWrapper .switchWrapper input:checked + .slider {
    background-color: #3D6BFF; }
  .sectionBlogContent .darkModeWrapper .switchWrapper input:checked + .slider:before {
    transform: translateX(1.25vw); }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper input:checked + .slider:before {
        transform: translateX(45px); } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper input:checked + .slider:before {
        transform: translateX(7.031vw); } }
  .sectionBlogContent .darkModeWrapper .switchWrapper .slider.round {
    border-radius: 1.771vw; }
    @media only screen and (max-width: 991px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper .slider.round {
        border-radius: 50px; } }
    @media only screen and (max-width: 640px) {
      .sectionBlogContent .darkModeWrapper .switchWrapper .slider.round {
        border-radius: 7.813vw; } }
  .sectionBlogContent .darkModeWrapper .switchWrapper .slider.round:before {
    border-radius: 50%; }

/* -------------------------- dark theme color start -------------------- */
.blogpageWrapper.darkTheme .heroSection {
  background-color: #444444; }
.blogpageWrapper.darkTheme .sectionBlogContent {
  background-color: #000000; }
  .blogpageWrapper.darkTheme .sectionBlogContent .socialIconWrapper .socialIcon .share {
    color: #D5D3D6; }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h1, .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h2, .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h3, .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h4, .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h5, .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText h6 {
    color: #D5D3D6; }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText p {
    color: #D5D3D6; }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .blockquoteWrapper blockquote {
    color: #D5D3D6; }
    @media only screen and (max-width: 991px) {
      .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .blockquoteWrapper blockquote {
        border-color: #ffffff;
        color: #ffffff; } }
    @media only screen and (max-width: 991px) {
      .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .blockquoteWrapper blockquote::before {
        color: #ffffff; } }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .tagContentWrapper .tagTitle {
    color: #ffffff; }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .userName,
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .userInfoSocial .blogUserInfo .userInfo .readingTime {
    color: #ffffff; }
  .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .btnWrapper .backBtn {
    border-color: transparent;
    background-color: #444444;
    color: #FFFFFF; }
    .blogpageWrapper.darkTheme .sectionBlogContent .blogContentText .btnWrapper .backBtn svg g {
      fill: #FFFFFF; }
  .blogpageWrapper.darkTheme .sectionBlogContent .darkModeWrapper .switchText {
    color: #ffffff; }
    @media only screen and (max-width: 991px) {
      .blogpageWrapper.darkTheme .sectionBlogContent .darkModeWrapper .switchText {
        color: #444444; } }

.pageNotFound {
  background-color: #1D27C1; }

.pagenotf-header {
  padding: 1.979vw 0;
  text-align: center; }
  @media only screen and (max-width: 991px) {
    .pagenotf-header {
      padding: 38px 0; } }
  .pagenotf-header a {
    display: inline-block; }
    .pagenotf-header a .pagenotf-dt-logo {
      display: block;
      max-width: 14.427vw; }
      @media only screen and (max-width: 991px) {
        .pagenotf-header a .pagenotf-dt-logo {
          display: none; } }
    .pagenotf-header a .pagenotf-mb-logo {
      display: none;
      max-width: 55.63px; }
      @media only screen and (max-width: 991px) {
        .pagenotf-header a .pagenotf-mb-logo {
          display: block; } }

.pageNotFound_content h1 {
  font-family: "SequelBlackHead", sans-serif;
  font-size: 21.875vw;
  line-height: normal;
  margin-top: -2.604vw;
  text-align: center;
  opacity: 0.5;
  -webkit-text-stroke: 3px #ffffff;
  -webkit-text-fill-color: transparent; }
  @media only screen and (max-width: 991px) {
    .pageNotFound_content h1 {
      font-size: 178.63px;
      line-height: normal;
      margin-top: -36px;
      -webkit-text-stroke: 1px #ffffff; } }
  @media only screen and (max-width: 396px) {
    .pageNotFound_content h1 {
      font-size: 45.109vw; } }
.pageNotFound_content .content_dis .contentBox {
  margin: 0 -1.146vw;
  margin-bottom: 2.604vw; }
  @media only screen and (max-width: 991px) {
    .pageNotFound_content .content_dis .contentBox {
      margin: 0 -30px;
      margin-bottom: 50px; } }
  @media only screen and (max-width: 767px) {
    .pageNotFound_content .content_dis .contentBox {
      margin: 0 0px;
      margin-bottom: 50px; } }
  .pageNotFound_content .content_dis .contentBox .title p {
    font-size: 0.938vw;
    line-height: 1.458vw;
    letter-spacing: 3.6px;
    margin-right: 2.708vw;
    padding-bottom: 0.521vw;
    white-space: nowrap;
    border-bottom: 1px solid #ffffff;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: "SequelRomanBody", sans-serif; }
    @media only screen and (max-width: 991px) {
      .pageNotFound_content .content_dis .contentBox .title p {
        font-size: 14px;
        line-height: 22.4px;
        letter-spacing: 2.8px;
        padding-bottom: 7px;
        margin-bottom: 30px;
        margin-right: 54px; } }
    @media only screen and (max-width: 767px) {
      .pageNotFound_content .content_dis .contentBox .title p {
        margin-right: 0;
        display: inline-block;
        margin-bottom: 46px; } }
  .pageNotFound_content .content_dis .contentBox .dis h2 {
    font-family: "SequelMediumDisp", sans-serif;
    line-height: normal;
    color: #ffffff;
    font-size: 4.167vw;
    margin-bottom: 1.406vw;
    margin-top: -0.985vw; }
    @media only screen and (max-width: 991px) {
      .pageNotFound_content .content_dis .contentBox .dis h2 {
        font-size: 80px;
        margin-bottom: 21px;
        margin-top: -20px; } }
    @media only screen and (max-width: 396px) {
      .pageNotFound_content .content_dis .contentBox .dis h2 {
        font-size: 20.202vw; } }
  .pageNotFound_content .content_dis .contentBox .dis p {
    font-family: "SequelRomanBody", sans-serif;
    color: #ffffff;
    font-size: 1.719vw;
    line-height: 1.927vw;
    margin-bottom: 1.250vw; }
    @media only screen and (max-width: 991px) {
      .pageNotFound_content .content_dis .contentBox .dis p {
        font-size: 22px;
        line-height: 29.6px;
        margin-bottom: 17px; } }
  .pageNotFound_content .content_dis .contentBox .dis .btn-them {
    color: #ffffff;
    text-transform: capitalize;
    padding: 0.912vw 0.843vw;
    font-size: 0.781vw;
    line-height: 0.938vw;
    letter-spacing: 0.015vw;
    margin-top: 0.938vw; }
    @media only screen and (max-width: 991px) {
      .pageNotFound_content .content_dis .contentBox .dis .btn-them {
        margin-top: 37px;
        font-size: 15px;
        letter-spacing: 0.28px;
        padding: 18.5px 16.2px; } }
    .pageNotFound_content .content_dis .contentBox .dis .btn-them svg {
      width: 0.938vw;
      margin-right: 1.042vw; }
      @media only screen and (max-width: 991px) {
        .pageNotFound_content .content_dis .contentBox .dis .btn-them svg {
          width: 18px;
          margin-right: 20px; } }
    .pageNotFound_content .content_dis .contentBox .dis .btn-them:hover {
      color: #000000 !important; }
      .pageNotFound_content .content_dis .contentBox .dis .btn-them:hover svg path {
        fill: #000000 !important; }

.sectionSitemap .linkAdreesWrapper {
  background-color: #ffffff;
  margin: 5.563vw 0;
  border-radius: 0.521vw;
  -webkit-box-shadow: 0 0.26vw 1.667vw 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0.26vw 1.667vw 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.26vw 1.667vw 0 rgba(0, 0, 0, 0.1); }
  @media only screen and (max-width: 991px) {
    .sectionSitemap .linkAdreesWrapper {
      margin: 70px 0;
      border-radius: 10px;
      -webkit-box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.1); } }
  @media only screen and (max-width: 640px) {
    .sectionSitemap .linkAdreesWrapper {
      margin: 10.938vw 0;
      border-radius: 1.563vw;
      -webkit-box-shadow: 0 0.781vw 5vw 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 0.781vw 5vw 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.781vw 5vw 0 rgba(0, 0, 0, 0.1); } }
  @media only screen and (max-width: 991px) {
    .sectionSitemap .linkAdreesWrapper .row {
      margin: 0; } }
  .sectionSitemap .linkAdreesWrapper .linksWrapper {
    padding: 2.604vw 6.167vw; }
    @media only screen and (max-width: 991px) {
      .sectionSitemap .linkAdreesWrapper .linksWrapper {
        padding: 20px 35px; } }
    @media only screen and (max-width: 640px) {
      .sectionSitemap .linkAdreesWrapper .linksWrapper {
        padding: 3.125vw 5.469vw; } }
    .sectionSitemap .linkAdreesWrapper .linksWrapper ul {
      margin: 0; }
      .sectionSitemap .linkAdreesWrapper .linksWrapper ul li {
        margin-bottom: 1.302vw; }
        @media only screen and (max-width: 991px) {
          .sectionSitemap .linkAdreesWrapper .linksWrapper ul li {
            margin-bottom: 18px; } }
        @media only screen and (max-width: 640px) {
          .sectionSitemap .linkAdreesWrapper .linksWrapper ul li {
            margin-bottom: 2.813vw; } }
        .sectionSitemap .linkAdreesWrapper .linksWrapper ul li a {
          color: #000000;
          font-size: 1.250vw; }
          @media only screen and (max-width: 991px) {
            .sectionSitemap .linkAdreesWrapper .linksWrapper ul li a {
              font-size: 18px; } }
          @media only screen and (max-width: 640px) {
            .sectionSitemap .linkAdreesWrapper .linksWrapper ul li a {
              font-size: 2.813vw; } }
  .sectionSitemap .linkAdreesWrapper .addressWrapper {
    background-color: #F8F8FB;
    padding: 2.604vw 5vw; }
    @media only screen and (max-width: 991px) {
      .sectionSitemap .linkAdreesWrapper .addressWrapper {
        padding: 30px; } }
    @media only screen and (max-width: 640px) {
      .sectionSitemap .linkAdreesWrapper .addressWrapper {
        padding: 4.688vw; } }
    .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper {
      background-color: #ffffff;
      border-radius: 0.521vw;
      padding: 1.042vw 2.0vw; }
      @media only screen and (max-width: 991px) {
        .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper {
          border-radius: 10px;
          padding: 20px; } }
      @media only screen and (max-width: 640px) {
        .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper {
          border-radius: 1.563vw;
          padding: 3.125vw; } }
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .addressTitle {
        font-family: "SequelHeavyDisp", sans-serif;
        color: #000000;
        font-size: 1.250vw;
        margin-bottom: 1.042vw; }
        @media only screen and (max-width: 991px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .addressTitle {
            font-size: 24px;
            margin-bottom: 20px; } }
        @media only screen and (max-width: 640px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .addressTitle {
            font-size: 3.750vw;
            margin-bottom: 3.125vw; } }
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .iconWrapper {
        width: 100%;
        max-width: 2.604vw;
        margin-right: 0.781vw; }
        @media only screen and (max-width: 991px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .iconWrapper {
            max-width: 35px;
            margin-right: 15px; } }
        @media only screen and (max-width: 640px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .iconWrapper {
            max-width: 5.469vw;
            margin-right: 2.344vw; } }
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text {
        color: #000000;
        font-size: 1.042vw;
        line-height: 1.771vw; }
        @media only screen and (max-width: 991px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text {
            font-size: 18px;
            line-height: 22px; } }
        @media only screen and (max-width: 640px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text {
            font-size: 2.813vw;
            line-height: 3.438vw; } }
        .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text span {
          margin-bottom: 0.781vw; }
          @media only screen and (max-width: 991px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text span {
              margin-bottom: 10px; } }
          @media only screen and (max-width: 640px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text span {
              margin-bottom: 1.563vw; } }
        .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text a {
          color: #000000;
          font-size: 1.042vw;
          line-height: 1.771vw; }
          @media only screen and (max-width: 991px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text a {
              font-size: 18px;
              line-height: 24px; } }
          @media only screen and (max-width: 640px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text a {
              font-size: 2.813vw;
              line-height: 3.750vw; } }
          @media only screen and (max-width: 991px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text a.btn-them {
              padding: 10px 14px; } }
          @media only screen and (max-width: 640px) {
            .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .text a.btn-them {
              padding: 1.563vw 2.188vw; } }
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .address,
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .mail,
      .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .call {
        margin-bottom: 1.563vw; }
        @media only screen and (max-width: 991px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .address,
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .mail,
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .call {
            margin-bottom: 25px; } }
        @media only screen and (max-width: 640px) {
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .address,
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .mail,
          .sectionSitemap .linkAdreesWrapper .addressWrapper .addressSubWrapper .call {
            margin-bottom: 3.906vw; } }

.sectionThankYou {
  padding-top: 8.643vw; }
  @media only screen and (max-width: 991px) {
    .sectionThankYou {
      padding-top: 177px; } }
  @media only screen and (max-width: 640px) {
    .sectionThankYou {
      padding-top: 27.656vw; } }
  .sectionThankYou .thankYouWrapper {
    margin: 7.083vw 0 7.865vw; }
    @media only screen and (max-width: 991px) {
      .sectionThankYou .thankYouWrapper {
        margin: 49px 0 110px; } }
    @media only screen and (max-width: 640px) {
      .sectionThankYou .thankYouWrapper {
        margin: 7.656vw 0 17.188vw; } }
    .sectionThankYou .thankYouWrapper .contentWrapper {
      max-width: 27.604vw;
      margin: 0 auto; }
      @media only screen and (max-width: 991px) {
        .sectionThankYou .thankYouWrapper .contentWrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          max-width: 490px; } }
      @media only screen and (max-width: 640px) {
        .sectionThankYou .thankYouWrapper .contentWrapper {
          max-width: 76.563vw; } }
      .sectionThankYou .thankYouWrapper .contentWrapper .thankYouTitle {
        color: #323232;
        font-family: "SequelMediumHead", sans-serif;
        font-size: 4.427vw;
        line-height: 5.208vw; }
        @media only screen and (max-width: 991px) {
          .sectionThankYou .thankYouWrapper .contentWrapper .thankYouTitle {
            text-align: center;
            font-size: 61px;
            line-height: 74px;
            margin: 51px 0 69px; } }
        @media only screen and (max-width: 640px) {
          .sectionThankYou .thankYouWrapper .contentWrapper .thankYouTitle {
            font-size: 9.531vw;
            line-height: 11.563vw;
            margin: 7.969vw 0 10.781vw; } }
      .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn {
        text-transform: none;
        margin-top: 3.177vw;
        font-size: 1.354vw;
        line-height: 1.563vw;
        letter-spacing: 0.026vw;
        padding: 1.719vw 1.625vw; }
        @media only screen and (max-width: 991px) {
          .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn {
            margin-top: 0;
            font-size: 26px;
            line-height: 30px;
            letter-spacing: 0.49px;
            padding: 30px 31.2px; } }
        @media only screen and (max-width: 640px) {
          .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn {
            font-size: 4.063vw;
            line-height: 4.688vw;
            letter-spacing: 0.077vw;
            padding: 4.688vw 4.875vw; } }
        .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn svg {
          margin-left: 1.198vw; }
          @media only screen and (max-width: 991px) {
            .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn svg {
              margin-left: 23px;
              width: 31px;
              height: 13.4px; } }
          @media only screen and (max-width: 640px) {
            .sectionThankYou .thankYouWrapper .contentWrapper .thankYouBtn svg {
              margin-left: 3.594vw;
              width: 4.844vw;
              height: 2.094vw; } }

/*# sourceMappingURL=style.css.map */