/**
* Template Name: Bikin - v4.0.1
* Template URL: https://bootstrapmade.com/bikin-free-simple-landing-page-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
  font-family: 'Ricardo';
  src: url('./../font/Ricardo-Regular.eot');
  src: url('./../font/Ricardo-Regular.eot?#iefix') format('embedded-opentype'),
    url('./../font/Ricardo-Regular.woff') format('woff'),
    url('./../font/Ricardo-Regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Ricardo-bold';
  src: url('./../font/Ricardo-Bold.eot');
  src: url('./../font/Ricardo-Bold.eot?#iefix') format('embedded-opentype'),
    url('./../font/Ricardo-Bold.woff') format('woff'),
    url('./../font/Ricardo-Bold.ttf') format('truetype');
  /*  font-weight: bold;*/
}

@font-face {
  font-family: 'Ricardo-light';
  src: url('./../font/Ricardo-Light.eot');
  src: url('./../font/Ricardo-Light.eot?#iefix') format('embedded-opentype'),
    url('./../font/Ricardo-Light.woff') format('woff'),
    url('./../font/Ricardo-Light.ttf') format('truetype');
  /*  font-weight: lighter;*/
}

@font-face {
  font-family: 'Ricardo-ExtraBold';
  src: url('./../font/Ricardo-ExtraBold.eot');
  src: url('./../font/Ricardo-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('./../font/Ricardo-ExtraBold.woff') format('woff'),
    url('./../font/Ricardo-ExtraBold.ttf') format('truetype');
  /*  font-weight: 900;*/
}

body {
  font-family: "Ricardo", sans-serif;
  color: #444444;
  /* color: white; */
  width: 100%;
}

a {
  color: #50CAD3;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
}

.row {
  width: 100%;
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #3b4ef8;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6272f9;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #3b4ef8;
  border-top-color: #e2e5fe;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0s !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: white;
  transition: all 0.5s;
  z-index: 997;
  padding: 5px 0;
}

/*
#header .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Poppins", sans-serif;
}*/

#header .logo a {
  color: #2d405f;
}

#header .logo img {
  max-height: 70px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0px;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: #707070;
  white-space: nowrap;
  transition: 0.3s;
  text-decoration: none;
}

.navbarLast a {
  padding: 0px 70px 0px 100px;
}

.navbar a i {
  font-size: 12px;
  line-height: 0;
}

.navbar a:hover,
.navbar .active,
.navbar li:hover>a {
  color: #3894B8;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #504B4B;
  width: 120%;
  z-index: 1;
  top: 69px;
  margin-left: -30%;
  border-radius: 0 0 15px 15px;
}

.subnav-content2 {
  display: none;
  position: absolute;
  left: 0;
  background-color: #504B4B;
  width: 120%;
  z-index: 1;
  top: 69px;
  margin-left: -30%;
  border-radius: 0 0 15px 15px;
}

.subnav-content a {
  float: left;
  color: white !important;
  margin-left: 4%;
  text-decoration: none;
  padding: 15px;
  font-family: 'Ricardo-light';
}

.subnav-content2 a {
  float: left;
  color: white !important;
  margin-left: 20% !important;
  text-decoration: none;
  padding: 5px 15px;
  font-family: 'Ricardo-light';
}

.navbar .getstarted {
  background: #FFBF5F;
  padding: 15px 40px;
  margin-left: 180px;
  margin-right: 0px;
  border-radius: 50px;
  font-weight: bold;
  letter-spacing: 0px;
  color: #fff;
  color: black;
}

.getstarted.insta {
  box-shadow: 5px 6px 11px #cbcbcb;
  margin-left: 0px;
  font-size: 1.3vw;
  max-width: 100%;
}

.getstarted.infa {
  background: #6DB9CA;
  box-shadow: 5px 6px 11px #cbcbcb;
  margin-left: 0px;
  font-size: 1.3vw;
  width: 150%;
}

.getstarted.info {
  background: #6DB9CA;
  box-shadow: 5px 6px 11px #cbcbcb;
  margin-left: 0px;
  font-size: 1.3vw;
  max-width: 100%;
}

.getstarted.info.darkBlue {
  background: #3894B8;
}

.navbar .getstarted:hover {
  color: black;
  background: #FFBF5F;
}

.getstarted.info:hover {
  color: black;
  background: #6DB9CA;
}

.navbar .getstarted.clock {
  width: 100%;
  margin-left: 0;
  font-size: 20px;
  justify-content: center;
}

.navbar .fa {
  font-size: 25px;
  color: gray;
  font-weight: bold;
  right: 9%;
  margin-top: 16%;
  position: relative;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  text-transform: none;
  font-weight: 500;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #3b4ef8;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #2d405f;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(29, 41, 60, 0.9);
  transition: 0.3s;
  z-index: 105;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 6px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #2d405f;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #3894B8;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 105;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #3b4ef8;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100%;
  background: white;
  border-bottom: 2px solid white;
  text-align: left;
  position: relative;
}

#hero h1 {
  position: relative;
  font-size: 100px;
  margin: 0 0 10px 0;
  z-index: 99;
}

.banner {
  position: relative;
  width: 100%;
  height: 40rem;
  margin-top: 6%;
  background: url("../img/templates/PNG/Home-Header.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
}

.product {
  margin-top: 1%;
  background: url("../img/templates/PNG/Product-Header.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
}

.about {
  background: url("../img/templates/PNG/Japhire5.jpg");
  background-size: cover;
  /*  background-attachment: fixed;*/
  background-position: center;
  background-repeat: no-repeat;
}

.work {
  background: url("../img/templates/PNG/work-headern.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
}

.pawnhead {
  height: 25rem;
  background: url("../img/templates/PNG/ja-pawn-head.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.pawnhead-2 {
  height: 25rem;
  background: url("../img/templates/PNG/ja-pawn-head.png");
  background-size: cover;
  background-attachment: unset;
  background-position: unset;
  background-repeat: no-repeat;
}

.workheadBanner {
  height: 25rem;
  background: url("../img/templates/PNG/ja-work-head.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.workheadBanner-2 {
  height: 25rem;
  background: url("../img/templates/PNG/ja-work-head.png");
  background-size: cover;
  background-attachment: unset;
  background-position: unset;
  background-repeat: no-repeat;
}

.jaTimeHead {
  height: 25rem;
  background: url("../img/templates/PNG/ja-time-head.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.jaTimeHead-2 {
  height: 25rem;
  background: url("../img/templates/PNG/ja-time-head.png");
  background-size: cover;
  background-attachment: unset;
  background-position: unset;
  background-repeat: no-repeat;
}

.jaLuxuryHead {
  height: 25rem;
  background: url("../img/templates/PNG/luxury-head.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.jaLuxuryHead-2 {
  height: 25rem;
  background: url("../img/templates/PNG/luxury-head.png");
  background-size: cover;
  background-attachment: unset;
  background-position: unset;
  background-repeat: no-repeat;
}

.work h4 {
  color: white !important;
}

.banner-taglines {
  color: white;
  font-size: 200px;
  font-weight: 700;
  left: -50px;
}

.banner-taglines h1 {
  font-size: 60px;
  font-weight: normal;
  line-height: 1;
}

.banner-taglines h4 {
  color: #CFD2C5;
  font-size: 27px;
}

.banner-text-1 {
  position: absolute;
  top: 115px;
  left: 10%;
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
}

.banner-text-1.headerText {
  left: 48%;
  top: 50px;
}

.headerText h1 {
  font-size: 55px;
  line-height: 1.1;
}

.navbar .getstarted.headerBtn {
  margin-left: 0px;
  padding: 15px 25px;
}

.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }

  50% {
    transform: translate(0, 15px);
  }

  100% {
    transform: translate(0, -0px);
  }
}


#hero .btn-get-started {
  font-family: "Krub", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: block;
  padding: 8px 32px 10px 32px;
  margin-top: 25px;
  border-radius: 5px;
  transition: 0.5s;
  color: #fff;
  background: #3b4ef8;
}

#hero .btn-get-started:hover {
  background: #0a22f6;
}

#hero .hero-img {
  max-width: 100%;
  margin-top: 0px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


@media (max-width: 992px) {
  #hero h1 {
    font-size: 36px;
    line-height: 42px;
    width: 100%;
  }

  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }

  #hero .hero-img {
    max-width: 100%;
  }
}

@media (max-height: 768px) {
  #hero {
    height: auto;
  }
}

.headerIcon {
  width: auto;
  margin: auto;
  margin-left: 10%;
  margin-right: 10%;
}

.box1 {
  background-color: #979677;
  padding: 40px;
  padding-top: 50px;
  padding-bottom: 60px;
  margin: 20px;
  color: white;
  border-radius: 0 0 0 60px;
  box-shadow: -2px 25px 50px #5a5a5a;
  margin-top: 0px;
  position: relative;
  z-index: 99;
}

.margin1 h2 {
  font-size: 3.5vw;
}

.margin1 p {
  font-size: 2vw;
}

.margin2 h2 {
  font-size: 2.7rem;
}

.margin3 h2 {
  font-size: 2.7rem;
}

.margin3 {
  overflow: hidden;
}

.box1 p {
  color: #ECF0DF;
  line-height: 130%;
}

.bg1 {
  background-color: #F9F8F7;
  margin-top: -100px;
  position: relative;
}

.bg4 {
  background-color: #F9F8F7;
  overflow: hidden;
}

.box2 {
  background-color: #5A5959;
  padding: 30px;
  margin: 20px;
  top: -85px;
  color: white;
  border-radius: 60px 0px 0 0;
  box-shadow: -2px 1px 75px grey;
  margin-top: -50px;
  margin-left: -40px;
  position: relative;
}

.box2Img1 {
  width: 150px;
  z-index: 99;
  margin-right: 80%;
  right: 0px;
  bottom: 10%;
  position: absolute;
  transition: .60s;
}

.box2Img1:hover+.circleOverBox {
  display: block;
  width: 70%;
  animation: zoom-out 0.5s ease;
}

@keyframes zoom-out {
  0% {
    transform: scale(0, 0);
  }

  100% {
    transform: scale(1, 1);
  }
}

.box2Img1:hover {
  width: 200px;
}

.box2Img2:hover+.circleOverBox,
.box2Img3:hover+.circleOverBox {
  display: block;
  width: 70%;
  animation: zoom-out 0.5s ease;
}

.circleOverBox {
  display: none;
  border-radius: 0 60px 0 60px;
  box-shadow: -2px -1px 34px #5a5a5a;
  background-color: white;
  color: black;
  margin-right: 9%;
  top: 66%;
  width: 50%;
  padding: 20px 30px 20px 40px;
  right: 0px;
  position: absolute;
  z-index: 105;
}

.circleOverBox h3 {
  font-size: 30px;
}

.circleOverBox h5 {
  font-size: 15px;
}

.circleOverBox h6 {
  font-size: 12px;
}

.infoBox2 {
  margin-right: 16%;
  top: 13%;
}

.infoBox3 {
  margin-right: -84%;
  top: 38%;
}

.box2Img2 {
  width: 150px;
  z-index: 99;
  margin-right: 87%;
  top: 12%;
  right: 0px;
  position: absolute;
  transition: .60s;
}

.box2Img3 {
  width: 150px;
  z-index: 99;
  margin-right: -13%;
  top: 38%;
  right: 0px;
  position: absolute;
  transition: .60s;
}

.box2Img2:hover {
  width: 200px;
  transition: .60s;
}

.box2Img3:hover {
  width: 200px;
  transition: .60s;
}


.box3 {
  background-color: #1964B0;
  padding: 50px 50px 60px 60px;
  margin-left: 20px;
  margin-right: 20px;
  color: white;
  border-radius: 0 60px 0 60px;
  box-shadow: -2px -1px 34px #5a5a5a;
  margin-top: -230px;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

.offset-md-4 {
  width: 56.5%;
}

.fixleft {
  padding-left: 185px;
}

.box3 p {
  color: #CFD2C5;
  line-height: 130%;
}

.margin2 .tickTextPath {
  margin-left: -7%;
}

.noBox {
  color: black;
  position: sticky;
  position: -webkit-sticky;
}

.margin1 {
  position: relative;
  overflow: hidden;
}

.margin2 {
  position: relative;
  overflow: hidden;
}

.margin5.prodFooter {
  margin-top: 0px;
  margin-left: 50px;
}

.footerIcons {
  margin-left: 4%;
}

.footerIcons h1 {
  font-size: 20px;
  font-weight: bolder;
}

.margin6 {
  margin-top: 3200px;
}

.robot {
  width: 80%;
  padding-top: 150px;
  padding-bottom: 150px;
}

.box4 {
  background-color: #6F8A83;
  padding: 50px;
  margin: 20px;
  color: white;
  width: 100%;
  border-radius: 0 60px 0 60px;
  position: relative;
}

.box-width {
  width: 90%;
}

.shadow-box {
  box-shadow: -2px 8px 34px #5a5a5a;
}

.box18 {
  transition: transform .60s;
  position: relative;
}

.box18:hover {
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  transition: transform .60s;
  z-index: 105;
}

.box5:hover {
  box-shadow: 0 0 10px #515151;
}

.box7:hover {
  box-shadow: 0 0 10px #515151;
}

.box10:hover {
  box-shadow: 0 0 10px #515151;
}

.box12:hover {
  box-shadow: 0 0 10px #515151;
}

#sticky-header {
  width: 100.6%;
  top: 45px;
  position: sticky;
  z-index: 105;
  background: white;
}

.tickTextPath.stage2 {
  margin-left: -7%;
}


/*.sticky-header {
  width: 100.6%;
  height: 150px;
  z-index: 100;
  position: sticky;
  top: 61px;
  background-color: white;
}*/

/*.test h2 {
  font-size: 2px;
}
.test p {
  font-size: 2px;
}*/

.box4 p {
  color: #CFD2C5;
  line-height: 105%;
  font-size: 1.5rem;
  padding-bottom: 1%
}

.box4 h5 {
  padding-top: 10px;
  font-size: 1.7rem;
}

.box4 a {
  background-color: #3894B8;
}

.bg-Background {
  background-image: linear-gradient(#fff 55%, #F9F8F7 0%);
}

.bg-Background2 {
  background-color: #F9F8F7;
}

.bg-Background3 {
  background-color: #F9F8F7;
  padding-bottom: 5%;
}

.box5 {
  background-color: #3894B8;
  padding: 50px;
  color: white;
  width: 100%;
  border-radius: 0 0 60px 0px;
  position: relative;
}

.box5 h5 {
  padding-top: 10px;
  font-size: 1.7rem;
}

.box5 p {
  color: #CFD2C5;
  line-height: 105%;
  font-size: 1.5rem;
  padding-bottom: 1%
}


.box6 {
  background-color: #CFD2C5;
  padding: 50px;
  color: white;
  width: 100%;
  border-radius: 0 0 0 60px;
  position: relative;
}

.box6 h5 {
  padding-top: 10px;
  font-size: 1.7rem;
}

.box6 p {
  color: #5A5959;
  line-height: 105%;
  font-size: 1.5rem;
  padding-bottom: 1%;
}

.box6 a {
  background-color: #3894B8;
}

.box7 {
  background-color: #303320;
  border-radius: 0 0 60px 0;
}

.box7 h5 {
  padding-top: 10px;
}

.box7 p {
  color: #CFD2C5;
  line-height: 130%;
  font-size: 1.5rem;
}

.box8 {
  background-color: #425F6A;
  border-radius: 0 60px 0 60px;
  z-index: 85;
}

.box8 h5 {
  padding-top: 10px;
}

.box8 p {
  color: #CFD2C5;
  line-height: 130%;
  font-size: 1.5rem;
}

.box9 {
  background-color: #08A5B5;
  border-radius: 0 0 60px 0;
  top: -20px;
}

.box9 h5 {
  padding-top: 10px;
}

.box9 p {
  color: #104679;
  line-height: 130%;
  font-size: 1.5rem;
}

.box9 a {
  background-color: #083554;
}

.box10 {
  background-color: #083554;
  border-radius: 0 0 0 60px;
}

.box10 h5 {
  padding-top: 10px;
}

.box10 a {
  background-color: #76DEF5;
  color: #083554;
}

.box10 p {
  color: #76DEF5;
  line-height: 130%;
  font-size: 1.5rem;
}

.box11 {
  background-color: #D43B1B;
  border-radius: 0 0 60px 0;
}

.box11 h5 {
  padding-top: 10px;
}

.box11 p {
  color: #CFD2C5;
  line-height: 130%;
  font-size: 1.5rem;
}

.box11 a {
  background-color: #3F7F98;
}

.box12 {
  background-color: #E96732;
  border-radius: 0 60px 0 60px;
}

.box12 h5 {
  padding-top: 10px;
}

.box12 p {
  color: black;
  line-height: 130%;
  font-size: 1.5rem;
}

.box13 {
  background-color: #FB9263;
  border-radius: 0 0 60px 0;
}

.box13 h5 {
  padding-top: 10px;
}

.box13 p {
  color: black;
  line-height: 130%;
  font-size: 1.5rem;
}

.box13 a {
  background-color: #D43B1B;
}

.buttonBox {
  background-color: #3F7F98;
  border: none;
  box-shadow: 1px 5px 8px #4d4d4d;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
}

.tickTextPath h1 {
  font-size: 50px;
  font-weight: 900;
  font-family: Ricardo-Extrabold;
}

.tickTextPath h4 {
  font-size: 1.9vw;
  color: #505042;
}

.tickTextPath p {
  font-family: Ricardo-light;
}

.tickTextPath h2 {
  font-size: 40px;
}

.tickTextPath.stage3 {
  padding-top: 0%;
  margin-left: -7%;
}

.indexClockOver {
  overflow: hidden;
}

.tickTextPath.stage4 {
  padding-top: 90px;
  padding-left: 1%;
}

.stage4 h3 {
  font-weight: normal;
}

.productClock {
  background-color: #F9F8F7;
}

.product-heading h1 {
  font-family: 'Ricardo-ExtraBold';
  font-size: 4.5vw;
}

.product-heading p {
  font-size: 1.3vw;
  padding-right: 50px;
}

.product-paragraph h2 {
  font-size: 3.2vw;
  margin-top: -10px;
  font-family: 'Ricardo-Bold';
}

.product-paragraph p {
  font-size: 1.3vw;
  padding-right: 30px;
  line-height: 1.6;
  color: #505042;
  font-family: 'Ricardo-light';
  width: 85%;
}

.productBody {
  margin-top: 3rem;
  padding-top: 3rem;
}

.productMarBot {
  padding-bottom: 3rem;
}

.productMargin {
  margin-top: 3rem;
}

.productSudWidth p {
  width: 70%;
}

.productModalBtn {
  background-color: unset;
  border: 0px;
  right: -10%;
  font-size: 2.5em;
  position: relative;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: -10%;
  margin-left: auto;
}

.modal-header {
  border-bottom: 0px;
}

.clockMargin {
  padding-top: 3rem;
}

.aboutPara {
  font-family: 'Ricardo-light';
}

.product-paragraph a {
  color: #6DB9CA;
}

.modal-content {
  background-color: white;
  border-radius: 0px;
  width: 160%;
  left: -30%;
  padding: 50px;
  animation: zoom-out 0.5s ease;
}

.modal-body {
  color: #505042;
  margin-top: -3%;
  padding: 0rem;
}

.lineLink {
  margin-top: 75%;
  font-size: 20px;
  color: #6DB9CA;
}

.lineLink.third {
  margin-left: 35%;
  margin-top: 46%;
  padding-bottom: 152px;
}

.lineLink a:link {
  text-decoration: none;
  background-color: transparent;
}

.lineLink a:visited {
  color: #50CAD3;
  background-color: transparent;
  text-decoration: none;
}

.lineLink a:hover {
  color: #5a5959;
}


.margin3Img img {
  position: relative;
  top: 120px;
  width: 175px;
  margin-left: 6%;
  float: right;
}

.tickBtn {
  position: relative;
  font-size: 35px;
  color: #6DAA65;
  padding: 0px;
  line-height: 80%;
}

.tickText table,
tr,
td {
  font-size: 20px;
  padding-bottom: 10px;
  z-index: 99;
}

.tickText img {
  width: 50px;
  padding-right: 10px;
}

.childText {
  top: 10px;
  position: relative;
}

.socilIcon table,
tr,
td {
  padding-right: 20px;
  position: relative;
}

.socialIconText h1 {
  font-family: Ricardo-Extrabold;
}

.socilIcon img {
  width: 30px;
}

.lineWidth {
  width: 100%;
  margin-left: 0%;
  position: relative;
}

.textImg img {
  width: 140%;
  left: -40%;
  position: relative;
}

.textImg.clockBg img {
  width: 130%;
  left: 0%;
  position: relative;
  top: -80px;
}

.tickTextBox input {
  border-radius: 50px;
}

input.largerCheckbox {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}

.form-check.form-check-input {
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  align-items: center !important;
}

.termsText {
  font-size: 11px;
  position: relative;
  margin-top: -2px;
  top: -4px;
  margin-left: 5px;
  color: #5A5959;
}

.termsText a {
  color: #5A5959;
  text-decoration: underline;
}

.fa {
  padding: 12px;
  font-size: 15px;
  width: 35px;
  height: 35px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 100px;
}

.fa:hover {
  opacity: 10;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #3B5998;
  color: white;
}

.fa-whatsapp {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #3B5998;
  color: white;
}

.footerText p {
  font-size: 12px;
  margin-left: 3%;
  color: black;
  padding-right: 100px;
}

.footerText a {
  color: black;
  text-decoration: underline;
}

.footerAlink a {
  color: black;
  text-decoration: underline;
}

.footer-links a {
  float: left;
  color: black;
  padding: 0px;
  margin-left: 0px;
}

.aboutBg {
  background-color: #F9F8F7;
  margin-top: -50px;
}

.aboutColHeight {
  padding-top: 100px;
  padding-bottom: 100px;
}

.aboutBg h1 {
  font-family: "Ricardo-Extrabold";
}

.jaguarImg img {
  margin-top: 40px !important;
}

.about-heading h1 {
  font-family: "Ricardo-Extrabold";
}

.calculateBg {
  background-color: #F9F8F7;
  padding-top: 3rem;
}

.calcBodyWidth {
  width: 95%;
}

.aboutBg.photoSection {
  background-color: #AFD9E2;
  margin-top: 0px;
}

.aboutBg.circleSection {
  background-color: #E68F0C;
  margin-top: 0px;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.aboutBrandMargin {
  margin-top: 3rem;
}

.aboutKey {
  padding-left: 5%;
}

.aboutBrand p {
  font-size: 1.2vw;
  padding-right: 10%;
}

.aboutKey img {
  width: 100%;
}

.photoSection h5 {
  font-size: 1.5vw;
}

.photoSection p {
  font-size: 1.2vw;
  font-family: 'Ricardo-light';
}

.circleFrame {
  height: 150px;
  width: 150px;
  border-radius: 500px;
  background-color: white;
}

.circleFrame img {
  width: 80%;
  margin-top: 50px;
}

.circleFrame img:hover {
  -ms-transform: scale(1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5);
  /* Safari 3-8 */
  transform: scale(1.2);
}

.headnav {
  float: left;
  overflow: hidden;
}

.headnav .headnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.headnav:hover .headnavbtn {
  background-color: red;
}

.headnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

.headnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

.headnav-content a:hover {
  background-color: #eee;
  color: black;
}

.headnav:hover .headnav-content {
  display: block;
}

.calcHeader {
  margin-left: 5%;
  overflow: hidden;
}

.calheader {
  background-color: #1E3B46;
  border-radius: 50px 0 0 0;
  height: 130px;
}

.calCenterBtn {
  margin-left: 75px !important;
}

.calcInfo {
  top: -10px;
  position: relative;
}

.v1 {
  border-left: 2px solid lightgray;
  height: 80%;
  margin-left: -5%;
  font-family: 'Ricardo-light';
}

.v2 {
  border-left: 2px solid lightgray;
  position: relative;
  margin-top: 15px;
}

.calc a {
  margin-top: 0%;
  padding-left: 20px;
  font-size: 1.4vw;
  color: #3894B8 !important;
}

.calfooter {
  background-color: #3D709D;
  border-radius: 0 0 50px 50px;
  box-shadow: 10px -12px 41px #424242;
}

/* Style the tab */
/*.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}*/

/* Style the buttons inside the tab */
.tab button {
  background-color: #F2D865;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px;
  transition: 0.3s;
  width: 120%;
  color: white;
  top: -67px;
  position: relative;
}

.tab h5 {
  font-size: 1.6vw;
  font-family: 'Ricardo-bold';
}

/* Change background color of buttons on hover */


/* Create an active/current tablink class */
.tab button.active {
  background-color: #EB7A47;
}

.conv button {
  background-color: #FFBF5F;
  border-radius: 0 0 0 25px;
  height: 80%;
}

.conv h5 {
  margin-top: -2%;
}

.summ button {
  height: 80%;
}

.summ h5 {
  margin-top: -2%;
}

.cont button {
  border-radius: 0 0 25px 0;
  height: 80%;
}

.cont h5 {
  margin-top: -2%;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  margin-top: -45px;
}

.form-select {
  width: 103%;
  top: -15px;
  line-height: 2;
  border-radius: 15px;
  position: relative;
  background-size: 30px 18px;
  background-image: url("../img/templates/PNG/Down-arrow.png");
}

.form-control {
  width: 103%;
  line-height: 2;
  height: 50px;
  top: -15px;
  position: relative;
  font-weight: bold;
  border-radius: 15px;
  padding-left: 20px;
  font-size: 20px;
}

.codeDropBar {
  background-color: white;
  border-radius: 200px 0 0 200px;
  border: 1px solid #ced4da;
  height: 100%;
  width: 114%;
  top: -29%;
  font-size: 1.5em;
  position: relative;
}

.codePhoneNum {
  border: 1px solid #ced4da !important;
  width: 70% !important;
  left: 3%;
}

.singaBox {
  border-radius: 50px;
  background: no-repeat;
  background-size: 20px 15px;
  background-position: 30%;
  background-color: white;
  background-image: url("../img/templates/PNG/Down-arrow-black.png");
}

.form-control::placeholder {
  color: black;
  font-size: 20px;
  font-weight: bold;
}

.form-group option {
  color: black;
  font-weight: bold;
  font-size: 20px;
  padding-left: 15px;
}

.calText {
  float: left;
  font-size: 1.2vw;
}

.getstarted.calcul {
  position: relative;
  width: 275px;
  margin-top: -10px;
  margin-left: 10px;
  border-radius: 15px;
  font-family: 'Ricardo-ExtraBold';
}

.calLogo img {
  width: 120px;
  z-index: 99;
  margin-top: -80px;
  margin-left: 15%;
}

.getstarted.calBtn {
  margin-left: 115px;
  right: -7%;
  width: 55%;
  padding: 10px 0 15px 50px;
  position: relative;
  box-shadow: 5px 6px 11px #cbcbcb;
}

.calculFooter {
  background-color: #F9F8F7;
}

.loginBg {
  background-color: #454345;
}

.logInnerBg {
  background-color: white;
  border-radius: 35px 0 35px 35px;
  box-shadow: 5px 6px 11px black;
}

.form-login {
  width: 106.5%;
  top: -15px;
  position: relative;
  background-color: #454345;
  border-radius: 5px;
  color: white;
}

.keyPhotoSection {
  padding: 2% 8%;
}

.keyPhotoSection img {
  width: 80%;
}

.jobBg {
  background-color: #F9F8F7;
  padding-top: 3rem;
}

.jobBodyWidth {
  width: 75% !important;
  margin-top: 5%;
}

.jobHeadLine {
  margin-left: -2%;
}

.jobLargeMedia {
  margin-left: 1%;
}

.jobBg h1 {
  font-family: 'Ricardo-bold';
  color: #707070;
}

.jobBg h4 {
  font-family: 'Ricardo';
  color: #707070;
}

.jobBg p {
  color: #707070;
}

.jobApplyBtn {
  padding-top: 5%;
  padding-bottom: 5%;
}

.jobBtn a {
  font-size: 1rem;
  padding-right: 50px;
  font-family: 'Ricardo-extrabold';
}

.jobPadding {
  padding-bottom: 3%;
}

.jobSubPadding {
  padding-bottom: 1.5%;
}

.applyJobBg {
  background-color: white;
  padding-top: 3rem;
}

.formBg {
  background-color: #F9F8F7;
}

.formBg h5 {
  color: #707070;
}

.formBg p {
  color: #707070;
}

.formDarkText p {
  color: #505042;
}

.formLearnBtn p {
  color: #AFA9A9;
  line-height: 1;
}

.getstarted.formBtn {
  position: relative;
  border-radius: 0px;
  margin-left: 0px;
  background-image: linear-gradient(#008ED5, #0081C2);
  ;
  color: white;
  height: 40px;
  width: 115%;
}

.getstarted.formBtn:hover {
  background-image: linear-gradient(#008ED5, #0081C2);
  ;
  color: white;
}

.formHeadBtn {
  margin-left: 100px !important;
  right: -5%;
  height: 75px;
  position: relative;
}

.formBox {
  border-radius: 0px;
  margin-top: 3%;
  border: 0px;
  height: 75%;
}

.formBox::placeholder {
  color: #BEBABA;
  font-size: 15px;
  font-family: 'Ricardo-light';
}

.formSelectBox {
  background-color: #E3E3E3;
  color: #707070;
  background-size: 20px 12px;
  border-radius: 0px;
  top: 0px;
}

input.formCheckBox {
  color: #707070;
}

.formlarge {
  height: 100px;
}

.formTickBox {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  height: 70px !important;
  position: relative;
  background-color: #F9F8F7;
  border: 1px solid #DDDDDD;
  box-shadow: 9px 10px 16px #67606029;
}

.formButtomBtn {
  width: 30%;
  font-family: 'Ricardo-ExtraBold';
  margin-left: auto;
  margin-right: auto;
}

.comment {
  width: 100%;
  height: 100px;
  padding: 10px;
  background-color: white;
  border: 0px;
}

.workhead {
  padding-bottom: 6% !important;
}

.workCircleImg3 {
  position: relative;
  width: 50%;
  float: right;
  margin: 20% -15% 0 0;
  z-index: 99;
}

.workCircleImg2 {
  position: relative;
  width: 50%;
  float: left;
  margin: 20% -15% 0 -70px;
  z-index: 99;
}

.workmouseOver {
  width: 90%;
  pointer-events: none;
}

.workMargin {
  padding-top: 5%;
  overflow: hidden;
}

.workBoxBottom {
  padding-bottom: 7%;
}

.workMargin h2 {
  font-size: 2.5em;
}

.workBox1 {
  width: 90%;
  background-color: #FB9263;
}

.workBox1 h2 {
  font-size: 33px;
}

.workBox1 p {
  font-size: 20px;
}

.workBox2 {
  border-radius: 0 60px 0 60px !important;
  background-color: #E96732;
  float: right;
}

.workBox2 h2 {
  font-size: 33px;
}

.workBox2 p {
  font-size: 20px;
}

.workmouseOver p {
  font-size: 20px;
}

.workmouseOver h2 {
  font-size: 33px;
}

.worktextImg img {
  width: 70%;
  margin-top: 5%;
}

.workRocket {
  padding-bottom: 5%;
}

.work-headText {
  top: 35%;
}

.pawnNavBar {
  margin-top: -1%;
  margin-left: 5%;
}

.pawnBox {
  height: 50%;
  margin: 0px;
  padding-top: 3%;
  padding-bottom: 1%;
  background-color: #CF3425;
  color: black;
}

.jaWorkColor {
  background-color: #3D5F6C !important;
  color: white;
}

.jaTimeColor {
  background-color: #344C4D !important;
  color: #439DA4;
}

.jaLuxuryColor {
  background-color: #272937;
  color: #A27840;
}

.jaLuxuryCalColor {
  background-color: #3D4E66 !important;
}

.jaTimeCalColor {
  background-color: #29585E !important;
}

.jaWorkHeader {
  background-color: #05141A;
}

.pawnBox h2 {
  width: 80%;
  margin-left: 9%;
  font-size: 1.6em;
}

.pawnBox img {
  width: 2%;
  margin-top: 1%;
}

.pawnFooter {
  background-color: white;
}

.pawnBg {
  background-color: #8A0000;
}

.pawnBanTitle h1 {
  font-size: 0.3em;
  font-family: 'Ricardo-ExtraBold';
}

.pawnBanTitle h4 {
  font-size: 0.2em;
  color: white !important;
}

.pawnTitle {
  margin-top: 5%;
  margin-left: 0%;
}

.pawnLightText {
  font-family: 'Ricardo-light';
  color: #F9F8F7;
}

#section-contact-us {
  background-color: #f9f8f7;
  margin-top: 5%;
}

#contact-us-box .contact-us-box_head {
  background-color: #f9f8f7;
  font-family: 'Ricardo-ExtraBold';
  color: black;
}

.contact-us-box_body {
  margin-left: 5px;
  background-color: #000;
  border-bottom-right-radius: 100px;
}

.contact-us-box_body .contact-us-box_body--left {
  background-color: #3d709d;
  border-bottom-right-radius: 100px;
}

.contact-us-box_body .contact-us-box_body--right img {
  max-width: 110%;
  height: 335px;
  margin-left: -3.5%;
  margin-top: -2%;
}

.contact-us-box_body .contact-us-box_body--right p {
  font-size: 11px;
}

#contact-social-media-list li {
  list-style: none;
  margin-top: 5%;
}

#contact-social-media-list img {
  width: 100%;
  float: right;
  margin-right: -9%;
}

.checkbox-round {
  width: 1.3em;
  height: 1.3em;
  background-color: #3D709D;
  border: 1px solid black;
  border-radius: 150% !important;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.checkbox-round:checked {
  background-color: gray;
}

.checkbox-round-label {
  margin-right: 30px;
}

.contact-arrow img {
  position: relative;
  width: 7%;
  padding-top: 3%;
  margin-left: auto;
  margin-right: auto;
}

.contact-form::placeholder {
  color: #A39595;
  font-family: 'Ricardo' !important;
  font-size: 0.8em;
}

.contact-formed {
  color: #A39595;
  font-family: 'Ricardo';
  font-size: 1em;
  line-height: 1;
  height: 50px;
  font-weight: bold;
  padding-left: 5%;
}

.contact-formed option {
  color: #A39595;
  font-family: 'Ricardo';
  font-size: 1em;
  font-weight: bold;
}

.btn-warning {
  color: #212529;
  background-color: #ffbf5f;
  top: -45%;
  /* left: -20%; */
  width: 125%;
  position: relative;
  box-shadow: 5px 6px 11px #444444;
}

.btn-warning:hover {
  background-color: white;
  color: #82BA05;
  border-color: #d39e00;
}

.form-check-input:checked[type=checkbox] {
  background-image: none;
}

.form-check-input:checked {
  background-color: black;
  border: 1px solid black;
}

.contact-text {
  color: black;
}

.contectIconText p {
  font-family: 'Ricardo-light';
  color: #A39595;
  float: right;
  margin-right: 15%;
}

.contectIconText2 p {
  font-family: 'Ricardo-light';
  color: #A39595;
}

.contactCircle label:hover {
  font-family: 'Ricardo-bold';
}

.contactCircle input:hover {
  background-color: black;
}

.contactSubPara {
  margin-top: -3%;
}

.contactSubPara:hover a {
  color: white !important;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  height: 103%;
  margin-top: -33%;
  text-align: center;
  white-space: nowrap;
  background-color: #575557;
  border: 1px solid #ced4da;
  border-radius: 15px 0 0 15px;
}

.login-form {
  background-color: #575557;
  color: white;
}

.login-form::placeholder {
  color: white;
  font-size: 1em;
  font-family: 'Ricardo-light' !important;
  padding-left: 10%;
  position: relative;
}

.login-form:focus {
  background-color: #575557;
  color: white;
}

.loginlineColor {
  color: #707070;
  margin-top: 2%;
  font-size: 18px;
}

.loginfootLine {
  color: #707070;
  font-size: 20px;
}

.passDots::placeholder {
  font-size: 2.5em;
  bottom: 5%;
  font-family: 'Ricaro-ExtraBold';
  color: #8D8D8D !important;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -3px;
  border: 0px;
}

.login-arrow img {
  width: 5%;
}

.login-link {
  color: #488BB0;
  font-family: 'Ricardo-ExtraBold';
}

.loginBold {
  font-family: 'Ricardo-Bold';
}

.loginBoldText a {
  font-family: 'Ricardo-ExtraBold';
}

.bg-light-blue,
#section-players {
  background-color: #aed8e2;
}

.signupBodyWidth {
  padding-top: 5%;
  width: 100%;
}

.signup-text {
  color: #56594d;
}

.signupHead h2 {
  font-family: 'Ricardo-ExtraBold';
  font-size: 2.3em;
}

.signupHead p {
  width: 80%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
}

#signup-box {
  border-radius: 60px 0 60px 60px;
}

.signup-sideHead h2 {
  color: black;
  font-size: 3em;
  padding-bottom: 3%;
  font-family: 'Ricardo-ExtraBold';
}

.signup-centerBtn {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 50%;
  font-family: 'Ricardo-bold';
}

.signup-footer p {
  color: black;
  font-size: 1em;
}

.signup-para {
  color: #505042;
  font-family: 'Ricardo-light' !important;
}

.signupLink a {
  text-decoration: none;
}

.signup-mail::placeholder {
  color: black !important;
  font-family: 'Ricardo-light' !important;
}

.signup-mail {
  padding-left: 10px;
}

.form-control-lg {
  border-radius: 1rem !important;
}

.signup-select {
  color: black !important;
  font-size: 19px !important;
  font-weight: bold !important;
  font-family: 'Ricardo-light' !important;
}

.signup-select {
  display: block;
  width: 103%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  height: 50px;
  margin-top: 10%;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-size: 20px 12px !important;
  background-image: url(../img/templates/PNG/Down-arrow.png) !important;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.signupBoxFoot {
  color: #707070;
}

.signupBoxFoot a {
  color: #707070;
}

.indexFootSubPage {
  margin-left: 5%;
}

.termsFootSubPage {
  margin-left: 5%;
}

.termsBannerText h1 {
  margin-top: 15%;
  position: relative;
  text-shadow: 0 0 3px #000000;
}

.policyPoints {
  vertical-align: top;
}

.form-check-input:checked[type=radio] {
  background-image: none !important;
  background-color: black;
}

// workaround
.intl-tel-input {
  display: table-cell;
}

.intl-tel-input .selected-flag {
  z-index: 4;
}

.intl-tel-input .country-list {
  z-index: 5;
}

.input-group .intl-tel-input .form-control {
  border-top-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0;
}

.socilIcon tr a {
  color: black;
}

.socilIcon tr a img:hover {
  color: #3894b8;
}

/*.socilIcon tr img:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;
}*/
.footerMargin a:hover {
  color: #3894b8;
}

.text-danger {
  color: red !important;
}

.footerIcon {
  padding-right: 20px;
}


/*-----Mobile Portrait View------*/
@media only screen and (max-width: 480px) {
  .work-headText {
    top: 25%;
  }

  .contact-us-box_body {
    border-bottom-right-radius: 0px;
  }

  .codeDropBar {
    width: 110%;
  }

  .keyPhotoSection {
    margin-top: 2% !important;
    padding: 0%;
  }

  .keyPhotoSection img {
    width: 100%;
  }

  .navbar .fa {
    margin-top: 0%;
    right: 0%;
  }

  .subnav-content {
    width: 96%;
    top: 175px;
    margin-left: 2%;
  }

  .subnav-content a {
    margin-left: 0% !important;
    font-size: 12px !important;
  }

  .subnav-content2 {
    width: 96%;
    top: 115px;
    margin-left: 2%;
  }

  .subnav-content2 a {
    margin-left: 8% !important;
    padding: 3px 4px;
    font-size: 12px !important;
  }

  .navbar-mobile .getstarted {
    width: 45%;
    justify-content: center;
  }

  .banner-text-1 {
    top: 60px;
  }

  .banner {
    height: 20em;
    background-position: bottom center;
    background-size: 500px 290px;
    background-attachment: unset;
  }

  .mobileHeadBtn {
    margin-top: -20%;
  }

  .mobileHeadWorkBtn {
    margin-top: -10%;
  }

  .proHeadTitle {
    margin-top: 7%;
  }

  .product {
    height: 24em;
    background-position: bottom center;
    background-size: 415px 315px;
    background-attachment: unset;
  }

  .about {
    height: 23em;
    background-attachment: unset;
    background-position: left bottom;
    background-size: 450px 305px;
  }

  .work {
    background-position: center;
    background-size: 440px 275px;
    height: 20em;
    background-attachment: unset;
  }

  .termsBanner {
    background-size: 430px 250px;
  }

  .termsBanner h1 {
    margin-top: 70% !important;
  }

  .termsFootSubPage {
    margin-left: -5%;
    width: 115%;
  }

  .banner-taglines h1 {
    font-size: 25px !important;
    margin-top: 30%;
  }

  .mobileHeadPos h1 {
    margin-top: 5%;
  }

  .banner-taglines h4 {
    font-size: 14px !important;
    /*margin-top: -12%;*/
  }

  .box1 {
    left: 25px !important;
    padding: 20px 20px 20px 30px;
  }

  .box2 {
    padding: 10%;
    margin: 10% !important;
  }

  .box2Width {
    width: 300px;
    height: 600px;
    margin-left: 12%;
  }

  .robot {
    width: 100%;
    padding-left: 1%;
    padding-top: 90% !important;
    padding-bottom: 60px !important;
  }

  .box2Img1 {
    bottom: 12% !important;
  }

  .box2Img2 {
    top: 33% !important;
  }

  .box2Img3 {
    top: 50% !important;
    margin-right: -20%;
  }

  .box3 {
    width: 85% !important;
    margin-left: 40px !important;
    padding: 30px 40px 30px 30px;
  }

  .box1 h2 {
    font-size: 27px !important;
  }

  .box1 p {
    font-size: 15px !important;
  }

  .box3 h2 {
    font-size: 27px !important;
  }

  .box3 p {
    font-size: 15px !important;
  }

  #sticky-header {
    width: 102.8%;
  }

  #sticky-header h2 {
    font-size: 25px;
  }

  #sticky-header p {
    font-size: 11px;
    font-family: 'Ricardo-Bold';
  }

  .margin2 h2 {
    font-size: 30px;
  }

  .margin2 h5 {
    font-size: 20px;
  }

  .margin2 p {
    font-size: 15px;
  }

  .tickTextPath.stage2 {
    margin-left: 10%;
  }

  .tickTextPath.stage3 {
    margin-left: 10%;
  }

  .tickTextPath.stage4 {
    padding-left: 5%;
  }

  .box4 {
    padding: 25px;
    left: 0px !important;
    width: 100%;
  }

  .box5 {
    padding: 25px;
    margin-left: 70px;
    left: -35px !important;
    width: 100% !important;
  }

  .box6 {
    padding: 25px;
    left: 35px !important;
    width: 100% !important;
  }

  .box7 {
    padding: 25px;
    left: 35px !important;
    width: 100% !important;
  }

  .box9 {
    padding: 20px;
    left: 20px !important;
    width: 100% !important;
  }

  .lineLink {
    font-size: 20px !important;
    margin-top: 5%;
    margin-left: 20%;
    padding-bottom: 20px;
  }

  .lineLink.third {
    margin-left: 15%;
    margin-top: 8%;
    padding-bottom: 0px;
  }

  .margin3Img img {
    width: 180px !important;
    padding: 10px;
    top: 0px;
    margin-right: 30%;
  }

  .margin3 h2 {
    font-size: 30px;
  }

  .margin3 h5 {
    font-size: 20px;
  }

  .margin3 p {
    font-size: 13px;
  }

  .singaBox {
    background-size: 20px 13px;
    background-position: 47%;
  }

  .tickTextPath h1 {
    font-size: 29px;
    width: 107%;
  }

  .textImg img {
    left: 0% !important;
    width: 90%;
  }

  .textImg.clockBg img {
    width: 110%;
    left: 3% !important;
    top: -20px;
  }

  .indexMobSearch {
    margin-left: 7% !important;
  }

  .robot {
    padding-top: 200px;
  }

  .box2Img1:hover+.circleOverBox {
    width: 100%;
    top: 65%;
    right: -25%;
  }

  .box2Img2:hover+.circleOverBox {
    width: 100%;
    top: 40%;
    right: -30%;
  }

  .box2Img3:hover+.circleOverBox {
    width: 100%;
    left: -25%;
  }

  .box2Img1 {
    width: 90px !important;
  }

  .box2Img1:hover {
    width: 120px !important;
  }

  .box2Img2 {
    width: 90px !important;
    margin-right: 82%;
  }

  .box2Img2:hover {
    width: 120px !important;
  }

  .box2Img3 {
    width: 90px !important;
  }

  .box2Img3:hover {
    width: 120px !important;
  }

  .footer-links {
    padding-bottom: 10%;
  }

  .footerLinkPad {
    margin-top: -25% !important;
  }

  .footerMargin {
    padding-left: 7%;
  }

  .circleOverBox.infoBox3 {
    right: 113%;
  }

  .productMobile {
    margin-left: 40px;
  }

  .proMobBtn {
    width: 50%;
  }

  .productIcon {
    width: 100% !important;
  }

  .productSudWidth p {
    width: 100%;
  }

  .product-paragraph h2 {
    font-size: 6vw;
  }

  .product-paragraph p {
    margin-top: 18px;
    font-size: 1.1em !important;
    width: 100%;
  }

  .productMargin {
    margin-top: 1rem;
  }

  .productBody {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .getstarted.insta {
    font-size: 0.8em !important;
    width: 100%;
  }

  .getstarted.info {
    font-size: 0.8em !important;
    width: 100%;
  }

  .modal-content {
    width: 80% !important;
    left: 1%;
    margin-left: 35px;
    padding: 15px;
  }

  .banner-text-1.headerText {
    left: 43%;
    top: 100px;
  }

  .headerText h1 {
    font-size: 20px !important;
  }

  .product-paragraph h4 {
    font-size: 12px;
  }

  .productMarBot {
    padding-bottom: 0rem;
  }

  .clockMargin {
    padding-top: 0rem;
  }

  .aboutKey {
    margin-left: -60px !important;
  }

  .aboutBg {
    margin-top: -90px;
  }

  .aboutKey img {
    width: 50px !important;
  }

  .aboutBrandMargin {
    margin-top: 0px;
  }

  .circleFrame {
    margin-left: auto;
    margin-right: auto;
    width: 150px !important;
    height: 150px !important;
  }

  .circleFrame img {
    margin-top: 50px !important;
  }

  .jaguarImg img {
    margin-top: 40px !important;
  }

  .aboutColHeight {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .aboutMobview h2 {
    font-size: 6vw;
    margin-left: 0px !important;
  }

  .aboutBg.circleSection {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .brandHead h2 {
    margin-left: 30px !important;
  }

  .photoSection h5 {
    font-size: 1rem;
  }

  .aboutMobview p {
    font-size: 1em !important;
  }

  .aboutCirclePara {
    margin-left: 10% !important;
  }

  .calcOver {
    overflow: hidden;
  }

  .calcHead {
    margin-left: 1%;
  }

  .v1 {
    height: 50%;
    margin-top: 0% !important;
    margin-left: 30% !important;
  }

  .aboutMap img {
    width: 200% !important;
    margin-left: -75px;
  }

  .calculateBg {
    overflow: hidden;
  }

  .calLogo img {
    width: 70px !important;
    margin-top: -175px;
  }

  .calcMobile {
    margin-left: 0px;
    width: 90%;
  }

  .tab {
    margin-top: 0px !important;
  }

  .tab button {
    width: 40%;
  }

  .conv button {
    top: -74% !important;
    margin-left: -55%;
  }

  .summ button {
    top: -174% !important;
    margin-left: 25%;
  }

  .cont button {
    top: -274% !important;
    margin-left: 82%;
  }

  .tabcontent {
    /*    margin-top: -140px!important;*/
    margin-left: 5%;
    width: 100%;
  }

  .tab h5 {
    font-size: 1rem;
  }

  .calfooter {
    margin-top: -3%;
  }

  .calText {
    font-size: 1rem !important;
  }

  .getstarted.calcul {
    width: 115px !important;
    margin-top: -10% !important;
    margin-left: -5px !important;
  }

  .form-select {
    background-size: 20px 12px;
  }

  .calcBoxBottom p {
    width: 230%;
    font-size: 10px;
    margin-top: 20%;
    margin-left: -43px;
  }

  .calMobBtn {
    width: 40%;
  }

  .calFootImg {
    margin-left: 2%;
  }

  .libLogo img {
    margin-top: 55% !important;
    width: 140% !important;
    margin-left: -30%;
  }

  .chubLogo img {
    margin-top: 65% !important;
    width: 130% !important;
  }

  .getstarted.calBtn {
    margin-left: -10px !important;
    width: 110%;
    font-size: 13px;
    padding: 10px 0 10px 30px;
  }

  .calaHeader h2 {
    padding-top: 30px;
    padding-left: 50px;
    padding-bottom: 10px;
  }

  .tickTextPath h4 {
    font-size: 3vw;
  }

  .calc a {
    font-size: 0.6rem;
  }

  .backLinkBtn a {
    font-size: 1.2em !important;
  }

  .v2 {
    margin-top: 10px;
    height: 50px;
  }

  .contact-us-box_body {
    margin-left: 0px;
    width: 98%;
  }

  .contactMobWidth {
    margin-left: -5%;
    margin-top: -8%;
  }

  .contactIcon {
    margin-left: -8%;
  }

  .contectIconText p {
    margin-right: 75%;
    top: -5%;
    font-size: 10px;
    position: relative;
  }

  .contectIconText2 p {
    margin-right: -47%;
    top: -100%;
    font-size: 10px;
    position: relative;
  }

  .contactTabWidth {
    width: 113%;
    margin-left: -6%;
  }

  .contactTabWidth h3 {
    margin-left: 10%;
    width: 100%;
  }

  #contact-us-box {
    width: 175%;
    margin-left: -30%;
    overflow: hidden;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 108%;
    margin-left: -4%;
    margin-top: -2.5%;
    height: 370px;
  }

  .contact-us-box_body .contact-us-box_body--left {
    border-bottom-right-radius: 0px;
  }

  .contactHeadText h2 {
    font-size: 1.6em;
    margin-top: 5%;
    margin-left: 9%;
  }

  .contactTabSubWidth {
    margin-top: -3%;
    margin-bottom: 6%;
  }

  .contact-Btn {
    padding-bottom: 10%;
  }

  .btn-warning {
    top: 25%;
  }

  .contactCircle {
    padding-bottom: 5% !important;
  }

  .brand-logos {
    display: block !important;
  }

  .brand-logos img {
    width: 100%;
    padding: 10%;
  }

  .contactFootImg1 {
    width: 110% !important;
    margin-left: -5% !important;
  }

  .contactFootImg3 {
    width: 70% !important;
    margin-left: 15%;
  }

  .contactFootImg5 {
    margin-left: 15%;
    width: 70% !important;
  }

  .contact-arrow img {
    width: 15%;
    padding-top: 15%;
  }

  .shadow-lg {
    box-shadow: none !important;
  }

  .pawnNavBar {
    margin-left: 0%;
  }

  .logInnerBg {
    width: 100%;
  }

  .loginMobWidth {
    width: 130%;
    margin-left: -16%;
  }

  .loginlineColor {
    font-size: 8px;
  }

  .loginfootLine {
    font-size: 10px;
  }

  .loginFootImg img {
    width: 100% !important;
  }

  .signup-sideHead {
    width: 110%;
  }

  .signup-footer p {
    margin-top: 5%;
  }

  .signupHead {
    width: 130%;
    margin-left: -15%;
  }

  #signup-box {
    margin-left: 5% !important;
    border-radius: 40px 0 40px 40px;
  }

  .signup-sideHead h2 {
    font-size: 2em;
  }

  .signup-para {
    font-size: 1em;
  }

  #signup-form {
    width: 125%;
    margin-left: -14%;
  }

  .signupHead h2 {
    font-size: 2em;
  }

  .signupNavBar {
    margin-left: 1% !important;
    overflow: hidden;
    width: 95%;
  }

  .signupBodyWidth {
    padding-top: 15%;
    margin-left: -5%;
    width: 102%;
  }

  .signupCheckBox {
    margin-left: -15%;
  }

  .signupTickText {
    margin-top: 18%;
    line-height: 0.4;
    margin-left: 0px;
    font-size: 9px;
  }

  .signupLink a {
    right: 0% !important;
  }

  .workHeadPara h4 {
    font-size: 13px !important;
    margin-top: -9%;
  }

  .workBox1 {
    width: 90% !important;
  }

  .workBox2 {
    left: 0px !important;
    width: 90% !important;
  }

  .workBox2 h2 {
    font-size: 16px !important;
  }

  .workmouseOver h2 {
    font-size: 16px;
  }

  .workmouseOver p {
    font-size: 12px;
  }

  .workCircleImg3 {
    width: 30%;
    margin: 0% 30% -42px 0px;
  }

  .workCircleImg2 {
    width: 30%;
    margin: -7% 0% 1px 150px;
  }

  .workmouseOver {
    width: 90% !important;
    left: -10px;
  }

  .tickTextPath.stage4 {
    padding-top: 0px;
  }

  .workRocket {
    padding-top: 10%;
  }

  .workConBtn {
    width: 45% !important;
  }

  .worktextImg img {
    float: right;
    width: 45%;
    margin-top: -45%;
    margin-right: 5%;
  }

  .jobBg {
    overflow: hidden;
  }

  .jobBodyWidth {
    width: 90% !important;
    margin-top: 15%;
  }

  .jobBodyWidth p {
    font-size: 10px;
    width: 160%;
    overflow: hidden;
  }

  .jobsubBtn {
    width: 20% !important;
    height: 10%;
    font-size: 12px !important;
  }

  .jobHeadLine {
    padding-left: 0px;
    margin-left: 95px !important;
    width: 80%;
  }

  .calcLink a {
    right: 3% !important;
  }

  .jobHeadLine a {
    right: 5%;
    margin-top: 1%;
    position: absolute;
  }

  .jobAppBtn {
    right: 30%;
    position: relative;
    max-width: 30% !important;
    font-size: 9px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  .jobApplyBtn {
    padding-top: 40%;
    padding-bottom: 50% !important;
  }

  .applyFooter {
    width: 70%;
  }

  .formBg {
    overflow: hidden;
  }

  .getstarted.formBtn {
    height: 30px;
    font-size: 8px;
    padding-left: 50px;
    padding-right: 50px;
    width: 100%;
  }

  .formLearnBtn p {
    line-height: 1.5;
    margin-left: 115%;
    width: 200%;
  }

  .formTickBox {
    width: 70%;
  }

  .formButtomBtn {
    width: 50%;
  }

  .formfootBtn a {
    font-size: 10px !important;
  }

  .formMobWidth p {
    width: 100%;
  }

  .pawnBox h2 {
    font-size: 0.8em;
  }

  .pawnBox img {
    width: 5%;
    margin-top: -4%;
  }

  .jaWorkHeader h2 {
    font-size: 1.2em;
    padding-left: 80px;
  }

  .jaTimeBottom {
    margin-left: 5%;
  }

  .jaTimeLink {
    padding-top: 0px !important;
    padding-bottom: 15px !important;
  }

  .jaTimeLink a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-size: 1em;
    margin-left: -7%;
  }


}

@media only screen and (min-width: 480px) and (max-width: 900px) {

  .banner {
    height: 27rem;
    background-size: unset;
    background-size: 820px 500px;
  }

  .about {
    background-position: top center;
    background-size: 855px 460px;
  }

  .work {
    background-position: top center;
  }

  .banner-text-1.headerText {
    left: 40%;
  }

  .banner-taglines h1 {
    font-size: 40px;
  }

  .banner-taglines h4 {
    font-size: 20px;
    margin-top: -20px;
  }

  .margin1 h2 {
    font-size: 5vw;
  }

  .margin1 p {
    font-size: 3vw;
  }

  .navbarLast a {
    padding: 10px 25px !important;
  }

  .navbar .fa {
    margin-top: 0%;
    right: 0%;
  }

  .bar {
    display: block !important;
  }

  .infoBox3 {
    top: 41%;
    margin-right: 30%;
  }

  .infoBox2 {
    top: 27%;
  }

  .box2Img1 {
    width: 125px;
  }

  .box2Img2 {
    width: 125px;
  }

  .box2Img3 {
    width: 125px;
  }

  .box2Img1:hover {
    width: 175px;
  }

  .box2Img2:hover {
    width: 175px;
  }

  .box2Img3:hover {
    width: 175px;
  }

  .box2Img1:hover+.circleOverBox {
    top: 58%;
  }

  .circleOverBox h3 {
    font-size: 20px;
  }

  .circleOverBox h5 {
    font-size: 15px;
  }

  .circleOverBox h6 {
    font-size: 11px;
  }

  .box1 {
    width: 85%;
    left: 48px;
  }

  .box2 {
    margin: -120px;
    margin-left: 170px;
    margin-right: 15%;
  }

  .robot {
    width: 75%;
    padding-top: 250px;
    padding-bottom: 200px;
    margin-left: 10%;
  }

  .box3 {
    margin-left: 100px;
  }

  .box4 {
    left: 35px;
  }

  .box5 {
    margin-left: 70px;
  }

  .box6 {
    left: 70px;
  }

  .box9 {
    left: 60px;
  }

  .box12 p {
    font-size: 1.2rem;
  }

  .textImg img {
    width: 60%;
    left: 15%;
  }

  .navbar .getstarted.headerBtn {
    margin-left: 0px;
    padding: 8px 20px;
    font-size: 13px;
    margin-top: -30px;
  }

  .box2Img2 {
    width: 120px;
    top: 25%;
  }

  .box2Img1 {
    width: 120px;
    bottom: 23%;
  }

  .box2Img3 {
    width: 120px;
    top: 40%;
  }

  .tickTextBox {
    overflow: hidden;
  }

  .tickTextPath.stage2 {
    margin-left: 10%;
  }

  .lineLink {
    margin-top: 5% !important;
    margin-left: 80px;
    font-size: 25px;
    padding-bottom: 20px;
  }

  .tickTextPath.stage3 {
    margin-left: 10%;
  }

  .margin3Img img {
    padding: 17px;
    width: 320px;
    margin-right: 25%;
    top: 0px;
  }

  .lineLink.third {
    margin-left: 10%;
    margin-top: 22%;
    padding-bottom: 0px;
  }

  .box13 {
    top: -10px;
  }

  #sticky-header {
    position: -webkit-sticky;
    width: 101.5%;
  }

  .tickTextPath.stage4 {
    padding-top: 0%;
  }

  .tickTextPath.stage4 {
    padding-left: 5%;
  }

  .textImg.clockBg img {
    top: -20px;
    width: 50%;
    left: 4%;
  }

  .indexMobSearch {
    margin-left: 19%;
  }

  .indexFormBox {
    width: 70%;
  }

  .singaBox {
    background-position: 35%;
  }

  .indexMobCheck {
    margin-left: -35% !important;
  }

  .navbar .getstarted.clock {
    width: 70%;
  }

  .margin5 {
    padding: 30px;
  }

  .footer-links {
    padding: 10px;
  }

  .footerMargin {
    margin-left: 3%;
  }

  .productMobile {
    margin-left: 5%;
  }

  .productHead p {
    font-size: 10px;
  }

  .getstarted.insta {
    font-size: 1.7vw;
    max-width: 130% !important;
  }

  .getstarted.info {
    font-size: 1.7vw;
    max-width: 65% !important;
  }

  .product-paragraph p {
    font-size: 2.3vw;
    width: 100%;
    padding-top: 2%;
  }

  .modal-content {
    width: 100%;
  }

  .aboutKey img {
    width: 150%;
  }

  .aboutKey {
    margin-left: -30px;
  }

  .aboutBg {
    margin-top: -50px;
    padding: 1% 5% 2% 5% !important;
  }

  .aboutLandSpace {
    padding: 0% !important;
  }

  .aboutLandCircle {
    margin-top: -5%;
  }

  .keyPhotoSection {
    padding: 0% 8%;
  }

  .photoSection h5 {
    font-size: 2vw;
  }

  .photoSection p {
    font-size: 2vw;
  }

  .circleFrame {
    width: 100px;
    height: 100px;
  }

  .circleFrame img {
    margin-top: 35px;
  }

  .jaguarImg img {
    margin-top: 25px !important;
  }

  .aboutColHeight {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .aboutMap {
    padding: 10px !important;
  }

  .aboutMap img {
    width: 100% !important;
  }

  .aboutBrand {
    margin-left: 3% !important;
  }

  .aboutBrand p {
    padding-right: 0%;
    margin-left: -65px;
    margin-top: 5% !important;
    font-size: 0.8em;
    width: 130%;
  }

  .tab {
    margin-top: -40px;
  }

  .tabcontent {
    margin-top: 20px;
  }

  .calText {
    font-size: 1.8vw;
  }

  .calLogo img {
    width: 65px;
    margin-top: -55px;
  }

  .calheader {
    height: 60px;
  }

  .calheader h2 {
    padding-top: 15px;
  }

  .conv button {
    top: -82%;
  }

  .summ button {
    top: -82%;
  }

  .cont button {
    top: -82%;
  }

  .v1 {
    margin-top: 0%;
    margin-left: 7%;
  }

  .getstarted.calcul {
    width: 175px;
    margin-top: -10%;
    margin-left: 7px;
  }

  .libLogo img {
    margin-top: 30%;
  }

  .chubLogo img {
    margin-top: 30%;
  }

  .getstarted.calBtn {
    width: 100%;
    left: -8%;
    margin-left: 15px;
    padding: 10px 0 15px 20px;
  }

  .subnav-content {
    top: 175px !important;
    margin-left: 2% !important;
    width: 96%;
  }

  .subnav-content a {
    margin-left: 0% !important;
  }

  .subnav-content2 {
    top: 115px !important;
    margin-left: 2% !important;
    width: 96%;
  }

  .subnav-content2 a {
    margin-left: 0% !important;
  }

  .tabNavBar {
    width: 75%;
  }

  .navbar-mobile .getstarted {
    width: 20%;
  }

  .contactWidth {
    overflow: hidden;
    width: 105%;
    margin-left: -5%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 118%;
    height: 290px;
  }

  .contectIconText p {
    margin-top: 0%;
    margin-right: 0%;
    font-size: 16px;
    width: 90%;
  }

  .contectIconText2 p {
    width: 300%;
    font-size: 16px;
    margin-left: 0%;
    margin-top: 0%;
  }

  .contactTabWidth {
    width: 100%;
    margin-left: -2%;
  }

  .contact-arrow {
    margin-left: 5%;
  }

  .contactTabSubWidth {
    margin-left: 0%;
    margin-top: -3%;
    padding-bottom: 7%;
  }

  .btn-warning {
    top: 60%;
    /* left: -10%; */
    width: 110%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    height: 112%;
    width: 115%;
    padding-bottom: 10%;
  }

  .contact-us-box_body .contact-us-box_body--left {
    border-radius: 0px;
  }

  .contact-formed {
    padding-left: 2.5%;
  }

  #contact-social-media-list img {
    width: 115%;
    margin-right: -34%;
  }

  .logInnerBg {
    width: 70%;
  }

  .input-group-text {
    height: 103%;
  }

  .loginfootLine {
    font-size: 15px;
  }

  .loginlineColor {
    font-size: 14px;
  }

  .signup-centerBtn {
    font-size: 1em !important;
    width: 40%;
  }

  .signup-footer {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
  }

  .signupBodyWidth {
    padding-top: 12%;
    width: 110% !important;
    margin-left: -5%;
    margin-right: auto !important;
  }

  .workhead {
    margin-top: -50px !important;
  }

  .workConBtn {
    width: 25% !important;
    justify-content: center !important;
  }

  .workmouseOver h2 {
    font-size: 27px;
  }

  .workmouseOver p {
    font-size: 18px;
  }

  .worktextImg img {
    width: 25%;
    margin-top: -30%;
    margin-left: 60%;
  }

  .aboutBg.circleSection {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  .workBox1 {
    width: 85%;
  }

  .workBox2 {
    float: left;
    width: 85%;
  }

  .workCircleImg3 {
    width: 35%;
    margin: 0% 35% -60px 0px;
  }

  .workCircleImg2 {
    width: 32%;
    margin: -6% -16% 3px 235px;
  }

  .workmouseOver {
    width: 85%;
  }

  .jobLargeMedia {
    margin-left: 15%;
  }

  .jobsubBtn {
    width: 250% !important;
  }

  .jobAppBtn {
    font-size: 15px !important;
  }

  .jobApplyBtn {
    padding-top: 40%;
    padding-bottom: 25%;
  }

  .jobBg p {
    width: 110%;
  }

  .formHeadBtn {
    font-size: 15px !important;
    width: 120% !important;
    height: 20%;
    margin-left: 0% !important;
  }

  .getstarted.formBtn {
    width: 260%;
    font-size: 12px;
  }

  .formLearnBtn p {
    margin-left: 85%;
    width: 175%;
  }

  .formTickBox {
    width: 50%;
  }

  .formButtomBtn {
    width: 50%;
  }

  .formfootBtn a {
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 12px !important;
  }

  .calc a {
    font-size: 2vw;
    padding-left: 0px;
  }

  .contact-us-box_body {
    width: 112%;
  }
}

/*@media only screen and (min-width: 414px) and (max-width: 896px) {

  .banner {
    height: 27rem;
    background-size: unset;
    background-size: 820px 500px;
  }
  .about {
    background-position: 90% -10%;
    background-size: 855px 460px;
  }
  .work {
    background-position: 50% -15%;
  }
  .banner-text-1.headerText {
    left: 40%;
  }
  .banner-taglines h1 {
    font-size: 40px;
  }
  .banner-taglines h4 {
    font-size: 20px;
    margin-top: -20px;
  }
  .margin1 h2 {
    font-size: 5vw;
  }
  .margin1 p {
    font-size: 3vw;
  }
  .navbar .fa {
    margin-top: 0%;
    right: 0%;
  }
  .bar {
    display: block!important;
  }
  .infoBox3 {
    top: 41%;
    margin-right: 30%;
  }
  .infoBox2 {
    top: 27%;
  }
  .box2Img1 {
    width: 125px;
  }
  .box2Img2 {
    width: 125px;
  }
  .box2Img3 {
    width: 125px;
  }
  .box2Img1:hover {
    width: 175px;
  }
  .box2Img2:hover {
    width: 175px;
  }
  .box2Img3:hover {
    width: 175px;
  }
  .box2Img1:hover + .circleOverBox {
    top: 58%;
  }
  .circleOverBox h3 {
    font-size: 20px;
  }
  .circleOverBox h5 {
    font-size: 15px;
  }
  .circleOverBox h6 {
    font-size: 11px;
  }
  .box1 {
    width: 85%;
    left: 48px;
  }
  .box2 {
    margin: -120px;
    margin-left: 170px;
    margin-right: 15%;
  }
  .robot {
    width: 75%;
    padding-top: 250px;
    padding-bottom: 200px;
    margin-left: 10%;
  }
  .box3 {
    width: 145%;
    margin-left: 100px;
  }
  .box4 {
    left: 35px;
  }
  .box5 {
    margin-left: 70px;
  }
  .box6 {
    left: 70px;
  }
  .box9 {
    left: 60px;
  }
  .box12 p {
    font-size: 1.2rem;
  }
  .textImg img {
    width: 60%;
    left: 15%;
  }
  .navbar .getstarted.headerBtn {
    margin-left: 0px;
    padding: 8px 20px;
    font-size: 13px;
    margin-top: -30px;
  }
  .box2Img2 {
    width: 120px;
    top: 25%;
  }
  .box2Img1 {
    width: 120px;
    bottom: 23%;
  }
  .box2Img3 {
    width: 120px;
    top: 40%;
  }
  .tickTextBox {
    overflow: hidden;
  }
  .tickTextPath.stage2 {
    margin-left: 10%;
  }
  .lineLink {
    margin-top: 5%!important;
    margin-left: 80px;
    font-size: 25px;
    padding-bottom: 20px;
  }
  .tickTextPath.stage3 {
    margin-left: 10%;
  }
  .margin3Img img {
    padding:  17px;
    width: 320px;
    margin-right: 25%;
    top: 0px;
  }
  .lineLink.third {
    margin-left: 10%;
    margin-top: 22%;
    padding-bottom: 0px;
  }
  .box13 {
    top: -10px;
  }
  #sticky-header {
    position: -webkit-sticky;
    width: 101.5%;
  }
  .tickTextPath.stage4 {
    padding-top: 0%;
  }
  .tickTextPath.stage4 {
    padding-left: 5%;
  }
  .textImg.clockBg img {
    top: -20px;
    width: 50%;
    left: 4%;
  }
  .indexMobSearch {
    margin-left: 19%;
  }
  .indexFormBox {
    width: 70%;
  }
  .singaBox {
    background-position: 35%;
  }
  .indexMobCheck {
    margin-left: -35%!important;
  }
  .navbar .getstarted.clock {
    width: 70%;
  }
  .margin5 {
    padding: 30px;
  }
  .footer-links {
    padding: 10px;
  }
  .footerMargin {
    margin-left: 3%;
  }
  .productMobile {
    margin-left: 5%;
  }
  .productHead p {
    font-size: 10px;
  }
  .getstarted.insta {
    font-size: 1.7vw;
    max-width: 130%!important;
  }
  .getstarted.info {
    font-size: 1.7vw;
    max-width: 65%!important;
  }
  .product-paragraph p {
    font-size: 2.3vw;
    width: 100%;
    padding-top: 2%;
  }
  .modal-content {
    width: 100%;
  }
  .aboutKey img {
    width: 150%;
  }
  .aboutKey  {
    margin-left: -30px;
  }
  .aboutBg {
    margin-top: -50px;
    padding: 1% 5% 2% 5%!important;
  }
  .aboutLandSpace {
    padding: 0%!important;
  }
  .aboutLandCircle {
    margin-top: -5%;
  }
  .keyPhotoSection {
    padding: 0% 8%;
  }
  .photoSection h5 {
    font-size: 2vw;
  }
  .photoSection p {
    font-size: 2vw;
  }
  .circleFrame {
    width: 100px;
    height: 100px;
  }
  .circleFrame img {
    margin-top: 35px;
  }
  .jaguarImg img {
    margin-top: 25px!important;
  }
  .aboutColHeight {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .aboutMap {
    padding: 10px!important;
  }
  .aboutMap img {
    width: 100%!important;
  }
  .aboutBrand {
    margin-left: 3%!important;
  } 
  .aboutBrand p {
    padding-right: 0%;
    margin-left: -65px;
    margin-top: 5%!important;
    font-size: 0.8em;
    width: 130%;
  }
  .tab {
    margin-top: -40px;
  }
  .tabcontent {
    margin-top: 20px;
  }
  .calText {
    font-size: 1.8vw;
  }
  .calLogo img {
    width: 65px;
    margin-top: -55px;
  }
  .calheader {
    height: 60px;
  }
  .calheader h2 {
    padding-top: 15px;
  }
  .conv button {
    top: -82%;
  }
  .summ button {
    top: -82%;
  }
  .cont button {
    top: -82%;
  }
  .v1 {
    margin-top: 0%;
    margin-left: 7%;
  }
  .getstarted.calcul {
    width: 175px;
    margin-top: -10%;
    margin-left: 7px;
  }
  .libLogo img {
    margin-top: 30%;
  }
  .chubLogo img {
    margin-top: 30%;
  }
  .getstarted.calBtn {
    width: 100%;
    left: -8%;
    margin-left: 15px;
    padding: 10px 0 15px 20px;
  }
  .subnav-content {
    margin-top: -2%;
    margin-left: 2%;
    width: 96%;
  }
  .subnav-content a {
    margin-left: 0%!important;
  }
  .subnav-content2 {
    margin-top: -2%;
    margin-left: 2%;
    width: 96%;
  }
  .subnav-content2 a {
    margin-left: 0%!important;
  }
  .tabNavBar {
    width: 65%;
  }
  .navbar-mobile .getstarted {
    width: 24%;
  }
  .contactWidth {
    width: 100%;
    margin-left: -3%;
  }
  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 118%;
    height: 290px;
  }
  .contectIconText p {
    margin-top: -140%;
    margin-right: -60%;
    font-size: 12px;
  }
  .contectIconText2 p {
    width: 220%;
    font-size: 12px;
    margin-left: -16%;
    margin-top: -80%;
  }
  .contactTabWidth {
    width: 100%;
    margin-left: -2%;
  }
  .contact-arrow {
    margin-left: 5%;
  }
  .contactTabSubWidth {
    margin-left: 0%;
  }
  .btn-warning {
    top: -60%;
    left: -10%;
    width: 110%;
  }
  .contact-us-box_body .contact-us-box_body--right img {
    height: 550px;
  }
  .contact-us-box_body .contact-us-box_body--left {
    border-radius: 0px;
  }
  .contact-formed {
    padding-left: 9%;
  }
  #contact-social-media-list img {
    width: 130%;
    margin-right: -45%;
  }
  .logInnerBg {
    width: 70%;
  }
  .input-group-text {
    height: 103%;
  }
  .loginfootLine {
    font-size: 15px;
  }
  .loginlineColor {
    font-size: 14px;
  }
  .signup-centerBtn {
    font-size: 1em!important;
    width: 40%;
  }
  .signup-footer {
    margin-left: auto;
    margin-right: auto;
    width: 100%!important;
  }
  .signupBodyWidth {
    padding-top: 12%;
    width: 120%;
    margin-left: -12%;
    margin-right: auto!important;
  }
  .workhead {
    margin-top: -50px!important;
  }
  .workConBtn {
    width: 25%;
    justify-content: center!important;
  }
  .workmouseOver h2 {
    font-size: 27px;
  }
  .workmouseOver p {
    font-size: 18px;
  }
  .worktextImg img {
    width: 25%;
    margin-top: -30%;
    margin-left: 60%;
  }
  .aboutBg.circleSection {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
  }
  .workBox1 {
    width: 85%;
  }
  .workBox2 {
    float: left;
    width: 85%;
  }
  .workCircleImg3 {
    width: 35%;
    margin: 0% 35% -60px 0px;
  }
  .workCircleImg2 {
    width: 32%;
    margin: -6% -16% 3px 235px;
  }
  .workmouseOver {
    width: 85%;
  }
  .jobLargeMedia {
    margin-left: 15%;
  }
  .jobsubBtn {
    width: 250%!important;
  }
  .jobAppBtn {
    font-size: 15px!important;
  }
  .jobApplyBtn {
    padding-top: 40%;
    padding-bottom: 25%;
  }
  .jobBg p {
    width: 110%;
  }
  .formHeadBtn {
    font-size: 15px!important;
    width: 120%!important;
    height: 20%;
    margin-left: 0%!important;
  }
  .getstarted.formBtn {
    width: 260%;
    font-size: 12px;
  }
  .formLearnBtn p {
    margin-left: 85%;
    width: 175%;
  }
  .formTickBox {
    width: 50%;
  }
  .formButtomBtn {
    width: 50%;
  }
  .formfootBtn a {
    margin-left: auto!important;
    margin-right: auto!important;
    font-size: 12px!important;
  }
  .calc a {
    font-size: 2vw;
    padding-left: 0px;
  }
  .contact-us-box_body {
    width: 112%;
  }
}*/

/*-----Tab Portrait View------*/
@media

/*only screen and (max-width: 844px) and (orientation:landscape),*/
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:portrait) {
  .banner {
    height: 27rem;
    background-size: unset;
    background-size: 820px 500px;
  }

  .codePhoneNum {
    left: 2%;
    max-width: 57% !important;
  }

  .termsBanner {
    background-size: 1000px 800px;
  }

  .termsBanner h1 {
    margin-top: 25%;
  }

  .work {
    background-size: 900px 600px;
  }

  .banner-taglines h1 {
    font-size: 40px;
  }

  .banner-taglines h4 {
    font-size: 20px;
    margin-top: -20px;
  }

  .margin1 h2 {
    font-size: 5vw;
  }

  .margin1 p {
    font-size: 3vw;
  }

  .navbar .fa {
    margin-top: 0%;
    right: 0%;
  }

  .bar {
    display: block !important;
  }

  .infoBox3 {
    top: 41%;
    margin-right: 30%;
  }

  .infoBox2 {
    top: 27%;
  }

  .box2Img1 {
    width: 125px;
  }

  .box2Img2 {
    width: 125px;
  }

  .box2Img3 {
    width: 125px;
  }

  .box2Img1:hover {
    width: 175px;
  }

  .box2Img2:hover {
    width: 175px;
  }

  .box2Img3:hover {
    width: 175px;
  }

  .box2Img1:hover+.circleOverBox {
    top: 58%;
  }

  .circleOverBox h3 {
    font-size: 20px;
  }

  .circleOverBox h5 {
    font-size: 15px;
  }

  .circleOverBox h6 {
    font-size: 11px;
  }

  .box1 {
    width: 85%;
    left: 48px;
  }

  .box2 {
    margin: 110px;
    margin-left: 125px;
  }

  .robot {
    width: 80%;
    padding-top: 100px;
    padding-bottom: 150px;
  }

  .box3 {
    width: 85%;
    margin-left: 70px;
  }

  .box4 {
    left: 35px;
  }

  .box5 {
    margin-left: 70px;
  }

  .box6 {
    left: 70px;
  }

  .box9 {
    left: 60px;
  }

  .textImg img {
    width: 60%;
    left: 15%;
  }

  .navbar .getstarted.headerBtn {
    margin-left: 0px;
    padding: 8px 20px;
    font-size: 13px;
    margin-top: -30px;
  }

  .box2Img2 {
    width: 120px;
    top: 25%;
  }

  .box2Img1 {
    width: 120px;
    bottom: 23%;
  }

  .box2Img3 {
    width: 120px;
    top: 40%;
  }

  .tickTextBox {
    overflow: hidden;
  }

  .tickTextPath.stage2 {
    margin-left: 10%;
  }

  .lineLink {
    margin-top: 5% !important;
    margin-left: 80px;
    font-size: 25px;
    padding-bottom: 20px;
  }

  .tickTextPath.stage3 {
    margin-left: 10%;
  }

  .margin3Img img {
    padding: 17px;
    width: 320px;
    margin-right: 51%;
    top: 0px;
  }

  .lineLink.third {
    margin-left: 10%;
    margin-top: 22%;
    padding-bottom: 0px;
  }

  .box13 {
    top: -10px;
  }

  #sticky-header {
    position: -webkit-sticky;
    width: 101.5%;
  }

  .tickTextPath.stage4 {
    padding-top: 0%;
  }

  .tickTextPath.stage4 {
    padding-left: 5%;
  }

  .textImg.clockBg img {
    top: -20px;
    width: 50%;
  }

  .indexFormBox {
    width: 70%;
  }

  .indexMobCheck {
    margin-left: -35% !important;
  }

  .navbar .getstarted.clock {
    width: 70%;
  }

  .margin5 {
    padding: 30px;
  }

  .footer-links {
    padding: 10px;
  }

  .footerMargin {
    margin-left: 3%;
  }

  .productHead p {
    font-size: 10px;
  }

  .getstarted.insta {
    font-size: 1.2vw;
    max-width: 130% !important;
  }

  .getstarted.info {
    font-size: 1.2vw;
    max-width: 130% !important;
  }

  .product-paragraph p {
    font-size: 1.8vw;
    width: 100%;
  }

  .modal-content {
    width: 120%;
    left: -10%;
  }

  .banner-text-1.headerText {
    left: 46%;
  }

  .aboutKey img {
    width: 150%;
  }

  .aboutKey {
    margin-left: -30px;
  }

  .circleFrame {
    width: 100px;
    height: 100px;
  }

  .circleFrame img {
    margin-top: 35px;
  }

  .jaguarImg img {
    margin-top: 25px !important;
  }

  .aboutBrand p {
    padding-right: 0%;
    margin-left: -48px;
    width: 100%;
  }

  .tab {
    margin-top: -40px;
  }

  .tabcontent {
    margin-top: 20px;
  }

  .calText {
    font-size: 1.8vw;
  }

  .calLogo img {
    width: 65px;
    margin-top: -55px;
  }

  .calheader {
    height: 60px;
  }

  .calheader h2 {
    padding-top: 15px;
  }

  .conv button {
    top: -82%;
  }

  .summ button {
    top: -82%;
  }

  .cont button {
    top: -82%;
  }

  .v1 {
    margin-top: 0%;
    margin-left: 7%;
  }

  .getstarted.calcul {
    width: 175px;
    margin-top: -10%;
    margin-left: 7px;
  }

  .libLogo img {
    margin-top: 30%;
  }

  .chubLogo img {
    margin-top: 30%;
  }

  .getstarted.calBtn {
    width: 100%;
    left: -8%;
    margin-left: 15px;
    padding: 10px 0 15px 20px;
  }

  .subnav-content {
    top: 175px !important;
    margin-left: 2%;
    width: 96%;
  }

  .subnav-content a {
    margin-left: 0% !important;
  }

  .subnav-content2 {
    top: 115px !important;
    margin-left: 2%;
    width: 96%;
  }

  .subnav-content2 a {
    margin-left: 0% !important;
  }

  .tabNavBar {
    width: 70%;
  }

  .navbar-mobile .getstarted {
    width: 19%;
  }

  .contactWidth {
    width: 105%;
    margin-left: -5%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 118%;
    height: 290px;
  }

  .contectIconText p {
    margin-top: 0%;
    margin-right: 60%;
  }

  .contectIconText2 p {
    margin-right: -14%;
    width: 500%;
    padding-left: 25%;
    margin-top: 0%;
  }

  .contactTabWidth {
    width: 105%;
    margin-left: -2%;
  }

  .contactTabSubWidth {
    margin-left: 0%;
  }

  .btn-warning {
    top: 60%;
    /* left: -10%; */
    width: 110%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    height: 635px;
    padding-bottom: 0%;
  }

  .contact-formed {
    padding-left: 3.5%;
  }

  .logInnerBg {
    width: 70%;
  }

  .input-group-text {
    height: 103%;
  }

  .loginfootLine {
    font-size: 15px;
  }

  .loginlineColor {
    font-size: 14px;
  }

  .signup-centerBtn {
    font-size: 1em !important;
    width: 40%;
  }

  .signup-footer {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
  }

  .signupBodyWidth {
    padding-top: 12%;
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .workConBtn {
    width: 25%;
    justify-content: center !important;
  }

  .worktextImg img {
    width: 25%;
    margin-top: -30%;
    margin-left: 60%;
  }

  .aboutBg.circleSection {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  .workBox1 {
    width: 85%;
  }

  .workBox2 {
    float: left;
    width: 85%;
  }

  .workCircleImg3 {
    width: 35%;
    margin: 0% 35% -60px 0px;
  }

  .workCircleImg2 {
    width: 32%;
    margin: -6% -16% 3px 235px;
  }

  .workmouseOver {
    width: 85%;
  }

  .jobLargeMedia {
    margin-left: 15%;
  }

  .jobsubBtn {
    width: 250% !important;
  }

  .jobAppBtn {
    font-size: 15px !important;
  }

  .jobApplyBtn {
    padding-top: 40%;
    padding-bottom: 25%;
  }

  .formHeadBtn {
    font-size: 15px !important;
    width: 120% !important;
    height: 20%;
    margin-left: 0% !important;
  }

  .getstarted.formBtn {
    width: 260%;
  }

  .formLearnBtn p {
    margin-left: 85%;
    width: 175%;
  }

  .formTickBox {
    width: 50%;
  }

  .formButtomBtn {
    width: 50%;
  }

  .calc a {
    font-size: 2vw;
  }

}

/*-----Tab Landscape View------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:landscape) {
  .subnav-content {
    top: 70px;
    margin-left: -23%;
  }

  .subnav-content2 {
    top: 70px;
    margin-left: -23%;
  }

  .banner {
    background-size: 1180px 730px;
  }

  .headerIcon {
    margin-left: 5%;
    margin-right: 5%;
  }

  .navbarLast a {
    padding: 0px 70px 0px 50px;
  }

  /*.navbar a {
    margin-left: 30%;
  }*/
  .bar {
    /*    display: none!important;*/
  }

  .margin2 h2 {
    font-size: 2.5rem;
  }

  .margin2 h5 {
    font-size: 1.4rem;
  }

  .margin2 p {
    font-size: 1.2rem;
  }

  .margin3 h2 {
    font-size: 2.4rem;
  }

  .margin3 h5 {
    font-size: 1.4rem;
  }

  .margin3 p {
    font-size: 1.2rem;
  }

  .singaBox {
    background-position: 35%;
  }

  .lineLink.third {
    margin-left: 20%;
  }

  .getstarted.insta {
    font-size: 1.1vw;
    width: 115%;
  }

  .getstarted.info {
    font-size: 1.2vw;
    width: 115% !important;
  }

  .getstarted.calBtn {
    margin-left: 50px;
    padding: 10px 0 15px 35px;
  }

  .getstarted.calcul {
    width: 240px;
    margin-left: 0px;
    margin-top: -7px;
  }

  .product-paragraph p {
    font-size: 1.5vw;
    width: 100%;
  }

  .calText {
    font-size: 1.6vw;
  }

  .v1 {
    margin-left: 0%;
  }

  .aboutBg p {
    font-size: 15px;
    padding-right: 0%;
    margin-right: -30px;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 105%;
    margin-left: -2%;
    margin-top: -1%;
  }

  .loginfootLine {
    font-size: 15px;
  }

  .loginlineColor {
    font-size: 14px;
  }

  .signup-centerBtn {
    font-size: 1em !important;
  }

  .workmouseOver h2 {
    font-size: 26px;
  }

  .workmouseOver p {
    font-size: 15px;
  }

  .workConBtn {
    max-width: 30% !important;
  }

  .formHeadBtn {
    font-size: 15px !important;
    width: 120% !important;
    height: 20%;
    margin-left: 0% !important;
  }

  .jobLargeMedia {
    margin-left: 7%;
  }

  .jobsubBtn {
    width: 250% !important;
  }

  .getstarted.formBtn {
    width: 260%;
  }

  .formLearnBtn p {
    margin-left: 85%;
    width: 175%;
  }

  .formTickBox {
    width: 40%;
  }

  .formButtomBtn {
    width: 45%;
  }

  .calc a {
    font-size: 2vw;
  }
}

/*@media only screen and (max-width: 1023px) {
  .subnav-content2 {
    margin-left: 6%;
    margin-top: 0%;
    width: 70%;
  }
}*/

@media screen and (min-width: 1024px) and (max-width: 2000px) {
  .bar {
    display: none !important;
  }
}

/*-----Desktop View------*/
@media (min-width: 1366px) {
  .box2Img1 {
    width: 200px;
    margin-right: 85%;
  }

  .box2Img1:hover {
    width: 250px;
  }

  .box2Img2 {
    width: 200px;
    margin-right: 90%;
  }

  .box2Img2:hover {
    width: 250px;
  }

  .box2Img3 {
    width: 200px;
  }

  .box2Img3:hover {
    width: 250px;
  }

  .circleOverBox {
    top: 68%;
    margin-right: 14%;
  }

  .infoBox2 {
    top: 15%;
    margin-right: 19%;
  }

  .infoBox3 {
    margin-right: -83%;
    top: 41%;
  }

  .lineLink {
    padding-bottom: 15px;
    margin-top: 56%;
  }

  .lineLink.third {
    margin-top: 40%;
  }

  .tickTextPath.stage4 {
    padding-top: 10%;
  }

  .textImg.clockBg img {
    width: 300%;
    left: -80%;
  }

  .workmouseOver {
    width: 80%;
  }

  .workCircleImg3 {
    width: 45%;
    margin: 18% -15% 0 0;
  }

  .workCircleImg2 {
    width: 45%;
    margin: 18% -15% 0 -70px;
  }

  .worktextImg img {
    width: 50%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    height: 405px;
  }

  .getstarted.calcul {
    width: 335px;
  }

  .getstarted.calBtn {
    right: -10%;
    padding: 10px 0 15px 70px;
  }

}

/*-----Desktop View------*/
@media (min-width: 1440px) {
  .banner {
    height: 45rem;
    margin-top: 5%;
  }

  .banner-text-1 {
    top: 170px;
  }

  .banner-taglines h1 {
    font-size: 70px;
  }

  .banner-taglines h4 {
    font-size: 35px;
  }

  .linelink {
    margin-top: 99%;
  }

  .getstarted.calBtn {
    margin-right: 115px;
  }

  .workBox1 {
    width: 75%;
  }

  .workBox2 {
    width: 75%;
  }

  .workmouseOver {
    width: 75%;
  }

  .workCircleImg3 {
    width: 45%;
    margin: 15% -15% 0 0;
  }

  .workCircleImg2 {
    width: 45%;
    margin: 15% -15% 0 -70px;
  }

  .worktextImg img {
    width: 50%;
  }

  .pawnhead {
    height: 31rem;
  }

  .subnav-content {
    top: 69px;
  }

  .subnav-content2 {
    top: 69px;
  }

  .aboutBrand p {
    width: 100%;
    margin-left: -10%;
  }

  .jobApplyBtn {
    padding-top: 17%;
  }
}



/*-----Desktop View------*/
@media (min-width: 1920px) {
  .codeDropBar {
    top: -21.5%;
    width: 128% !important;
    border-radius: 200px 0 0 200px !important;
  }

  .codePhoneNum {
    max-width: 88%;
  }

  .subnav-content {
    top: 108px;
    width: 120%;
    margin-left: -30%;
    letter-spacing: 0px;
  }

  .subnav-content a {
    margin-left: 6% !important;
    font-family: 'Ricardo' !important;
  }

  .subnav-content2 {
    top: 108px;
    width: 120%;
    margin-left: -30%;
    letter-spacing: 0px;
  }

  .subnav-content2 a {
    padding: 5px 60px 5px 10px;
    margin-left: 15% !important;
    font-family: 'Ricardo' !important;
  }

  .logo img {
    width: 192px;
    height: 94px;
  }

  #header .logo img {
    max-height: 94px;
    width: 240px;
  }

  .navbar a {
    font-size: 22px;
    color: #707070;
    font-weight: 400;
    letter-spacing: 2px;
    font-family: 'Ricardo-Bold';
  }

  .navbar li {
    padding: 20px;
  }

  .navbar ul {
    margin-left: 15px;
    margin-right: -5%;
  }

  .navbar .fa {
    right: 3%;
    margin-top: 7%;
    font-size: 32px;
  }

  .box1 {
    width: 85%;
    padding: 100px 70px;
    border-radius: 0 0 0 125px;
  }

  .box1 h2 {
    font-weight: normal;
  }

  .box1 p {
    font-weight: normal;
  }

  .box2 {
    width: 760px;
    height: 1388px;
    padding: 150px;
    left: -50px;
    border-radius: 125px 0 0 0;
    margin-top: -200px;
  }

  .box2.robot {
    padding-top: 220px;
  }

  .box3 {
    width: 85%;
    height: 510px;
    margin-top: -450px;
    border-radius: 0 125px 0 125px;
  }

  .box2Img1:hover+.circleOverBox {
    width: 65%;
  }

  .box2Img2:hover+.circleOverBox {
    width: 65%;
  }

  .box2Img3:hover+.circleOverBox {
    width: 65%;
  }

  .circleOverBox h3 {
    font-size: 2.5rem;
  }

  .circleOverBox h6 {
    font-size: 1rem;
    color: #505042;
  }

  .circleOverBox {
    top: 63%;
    margin-right: 14%;
    padding: 20px 30px 20px 40px;
  }

  .circleOverBox h5 {
    font-size: 20px;
    color: #505042;
  }

  .infoBox2 {
    margin-right: 19%;
    top: 21%;
  }

  .infoBox3 {
    margin-right: -81%;
    top: 48%;
  }

  #sticky-header {
    top: 62px;
  }

  .box4 {
    width: 100%;
    padding: 80px;
    border-radius: 0 125px 0 125px;
  }

  .box4 h2 {
    font-size: 70px;
  }

  .box4 h5 {
    font-size: 40px;
    padding-top: 20px;
  }

  .box4 p {
    font-size: 35px;
    line-height: 130%;
  }

  .buttonBox {
    padding: 20px 50px;
    font-size: 25px;
    width: 33%;
  }

  .box5 {
    width: 100%;
    padding: 80px;
    border-radius: 0 0 125px 0;
  }

  .box5 h2 {
    font-size: 70px;
  }

  .box5 h5 {
    font-size: 40px;
    padding-top: 20px;
  }

  .box5 p {
    font-size: 35px;
    line-height: 130%;
  }

  .box6 {
    width: 100%;

    padding: 80px;
    border-radius: 0 0 0 125px;
  }

  .box6 h2 {
    font-size: 70px;
  }

  .box6 h5 {
    font-size: 40px;
    padding-top: 20px;
  }

  .box6 p {
    font-size: 35px;
    line-height: 130%;
  }

  .box7 {
    border-radius: 0 0 125px 0;
  }

  .box8 {
    width: 100%;
    border-radius: 0 125px 0 125px;
  }

  .lineLink {
    padding-left: 10%;
    margin-top: 460px;
    font-size: 25px;
    padding-bottom: 65px;
    color: #6DB9CA;
    font-weight: normal;
    float: left;
  }

  .margin3Img img {
    padding-top: 20px;
    width: 230px;
  }

  .box9 {
    border-radius: 0 0 125px 0;
  }

  .box10 {
    border-radius: 0 0 0 125px;
  }

  .box11 {
    border-radius: 0 0 125px 0;
  }

  .box12 {
    border-radius: 0 125px 0 125px;
  }

  .box13 {
    border-radius: 0 0 125px 0;
  }

  .lineLink.third {
    margin-top: 280px;
    padding-bottom: 260px;
  }

  .tickTextPath {
    padding-top: 0%;
  }

  .tickTextPath h2 {
    font-size: 70px;
  }

  .tickTextPath.stage3 {
    padding-top: 0%;
  }

  .tickTextPath h1 {
    font-size: 85px;
    font-weight: 900;
  }

  .tickTextPath h3 {
    font-size: 45px;
  }

  .tickText table,
  tr,
  td {
    font-size: 30px;
    padding-bottom: 20px;
  }

  .tickTextPath p {
    font-size: 25px;
  }

  .indexClockOver {
    overflow: hidden;
  }

  .textImg img {
    width: 110%;
    left: -30%;
    margin-top: -80px;
    position: relative;
  }

  .textImg.clockBg img {
    width: 110%;
    left: 20%;
    position: relative;
    top: -60px;
  }

  .clockBtnWidth {
    width: 103%;
  }

  .singaBox {
    background-position: 23%;
  }

  .tickTextBox form {
    margin-top: 80px;
  }

  .tickTextBox input {
    height: 70px;
    width: 100%;
    border-radius: 70px;
  }

  .tickTextBox select {
    height: 70px;
    width: 100%;
    border-radius: 70px;
  }

  .navbar .getstarted.clock {
    width: 96%;
  }

  .tickTextPath.stage4 {
    padding-top: 0%;
  }

  .form-control {
    font-size: 25px;
    padding-left: 30px;
    height: 60px;
  }

  .form-control::placeholder {
    font-size: 25px;
  }

  .form-check input {
    height: 30px;
    width: 50px;
    border-radius: 0px;
  }

  .margin5 {
    padding-top: 100px;
  }

  .socilIcon img {
    width: 40px;
  }

  .socialIconText h1 {
    font-size: 52px;
  }

  .footer-links h5 {
    font-size: 30px;
  }

  .footer-links a {
    font-size: 16px;
  }

  .banner {
    height: 62rem;
    margin-top: 4.5%;
  }

  .banner-taglines {
    color: white;
  }

  .banner-text-1 {
    position: absolute;
    top: 235px;
    line-height: 1.1;
    left: 9%;
    white-space: nowrap;
  }

  .pro {
    top: 160px;
    left: 10%;
  }

  .modal-content {
    border-radius: 0;
    width: 330%;
    left: -120%;
    padding: 100px;
  }

  .modal-body h6 {
    font-size: 22px;
  }

  .modal-body p {
    font-size: 20px;
    font-family: 'Ricardo-light';
  }

  .aboutBg.circleSection {
    padding-top: 100px !important;
    padding-bottom: 200px !important;
  }

  .circleFrame img {
    margin-top: 110px;
  }

  .jaguarImg img {
    margin-top: 50px !important;
    width: 60% !important;
  }

  .goodLifeImg img {
    margin-top: 55px !important;
    width: 55% !important;
  }

  .headerIcon {
    margin-left: 8%;
    margin-right: 12%;
  }

  .banner-taglines h1 {
    font-size: 98px;
  }

  .productModalBtn {
    right: -7%;
    font-size: 5em;
  }

  .productMobile {
    margin-left: 1%;
  }

  .product-paragraph p {
    font-size: 1.2vw;
    width: 75%;
    margin-left: -50px;
  }

  .circleFrame {
    height: 275px;
    width: 275px;
  }

  .products h4 {
    font-size: 45px !important;
  }

  .productWatch {
    left: -10%;
    position: relative;
  }

  .banner-text-1.headerText {
    top: 200px;
  }

  .getstarted.insta {
    letter-spacing: 0px;
  }

  .getstarted.info {
    left: 0%;
    letter-spacing: 0px;
  }

  .aboutBg p {
    width: 115%;
    line-height: 1.5;
    margin-left: -7%;
    font-size: 20px;
  }

  .banner-taglines h4 {
    font-size: 50px;
    color: #CFD2C5;
    margin-top: 20px;
  }

  .navbar .getstarted.headerBtn {
    margin-left: 0px;
    padding: 24px 30px;
    font-size: 25px;
    font-weight: bold;
    margin-top: 35px;
    letter-spacing: 1px;
  }

  .robot {
    width: 541px;
    height: auto;
    padding-top: 290px;
    padding-bottom: 50px;
  }

  .box2Img1 {
    width: 268px;
    height: 268px;
    bottom: 17%;
    margin-right: 80%;
  }

  .box2Img1:hover {
    width: 318px;
    height: 318px;
  }

  .box2Img2:hover {
    width: 318px;
    height: 318px;
  }

  .box2Img3:hover {
    width: 318px;
    height: 318px;
  }

  .box2Img2 {
    width: 268px;
    height: 268px;
    margin-right: 85%;
    top: 18%;
    right: 0px;
  }

  .box2Img3 {
    width: 268px;
    height: 268px;
    margin-right: -15%;
    top: 45%;
    right: 0px;
  }

  .termsText {
    font-size: 18px;
    position: relative;
    margin-top: -2px;
    top: -8px;
  }

  .footerText p {
    font-size: 13px;
    margin-left: 5%;
    padding-right: 15%;
  }

  .box-width {
    width: 85%;
  }

  .v1 {
    margin-left: -7.5%;
  }

  .calcHeader {
    margin-left: 17% !important;
  }

  .calcSubHead {
    margin-left: -5.5% !important;
  }

  .calLogo img {
    width: 150px;
    margin-top: -95px;
    margin-left: 25%;
  }

  .calc a {
    top: 0%;
    position: relative;
    font-size: 1.7em;
  }

  .tab button {
    top: -84px;
  }

  .calheader h2 {
    font-size: 2.5vw;
    margin-top: -15px;
  }

  .calcBodyWidth h2 {
    margin-top: 10px;
  }

  .calheader {
    height: 130px;
  }

  .tabcontent {
    margin-top: -65px;
  }

  .form-select {
    line-height: 3;
  }

  .getstarted.calcul {
    width: 335px;
    margin-top: 4px;
  }

  .getstarted.calBtn {
    margin-left: 130px;
    right: -45px;
  }

  .v2 img {
    margin-top: 10%;
  }

  .calcBoxBottom p {
    margin-top: 10%;
    margin-right: 25%;
  }

  .jaTimeBottom p {
    float: right;
    right: -20%;
    position: relative;
  }

  .jaTimeBottom img {
    float: right !important;
  }

  .libLogo img {
    float: left;
    right: 30%;
    position: relative;
  }

  .v2 {
    right: 5%;
  }

  .jobLargeMedia {
    margin-left: -0.5% !important;
  }

  .jobBodyWidth {
    width: 70% !important;
  }

  .jobNavBar img {
    margin-left: -3%;
  }

  .jobHeadLine {
    margin-left: 1.5%;
  }

  .jobBg h1 {
    font-size: 3.5em;
  }

  .jobBg h4 {
    font-size: 2.2em;
  }

  .jobBg p {
    font-size: 1.2em;
  }

  .jobsubBtn {
    width: 80%;
  }

  .jobApplyBtn {
    padding-top: 22%;
    padding-bottom: 9%;
  }

  .applyFooter p {
    font-family: 'Ricardo-light';
    line-height: 2;
    font-size: 1.3em;
    width: 93%;
  }

  .navbar .getstarted.jobsubBtn {
    width: 95%;
    height: 75%;
  }

  .comment {
    height: 150px;
  }

  .formBg h5 {
    font-size: 1.5em;
  }

  .formBg p {
    font-size: 1.2em;
  }

  .getstarted.formBtn {
    width: 150%;
    height: 50px;
  }

  .formLearnBtn p {
    width: 90%;
    line-height: 1.3;
    margin-left: 28%;
  }

  .formTextMargin p {
    margin-top: 10%;
  }

  .formlarge {
    height: 150px !important;
  }

  .formBox::placeholder {
    font-size: 18px;
  }

  .formDarkText p {
    font-family: 'Ricardo-Bold';
    font-size: 1.5em;
  }

  input.largerCheckbox {
    width: 30px;
    height: 30px;
    margin-top: 3px;
  }

  .signupNavBar {
    margin-left: -14% !important;
  }

  .pawnNavBar {
    margin-left: -14%;
  }

  .pawnTitle {
    margin-left: 2%;
    margin-top: 6%;
  }

  .pawnBox {
    padding-top: 3%;
    padding-bottom: 1%;
  }

  .pawnBox h2 {
    font-size: 2.5em;
    width: 80%;
    margin-left: 10.5%;
  }

  .pawnBox img {
    width: 2%;
  }

  .workHeadBtn {
    height: 100px;
  }

  .workPara p {
    line-height: 2;
    font-size: 1.2em;
    margin-left: 0%;
  }

  .workBox1 {
    width: 90%;
  }

  .workBox1 h2 {
    font-size: 50px !important;
  }

  .workBox2 {
    border-radius: 0 125px 0 125px !important;
    width: 90%;
  }

  .workBox2 h2 {
    font-size: 50px;
  }

  .workmouseOver {
    width: 80%;
  }

  .workmouseOver h2 {
    font-size: 50px;
  }

  .worktextImg img {
    margin-top: -10%;
  }

  .workPaddding {
    padding-top: 3%;
  }

  .workRocket {
    padding-top: 5%;
    padding-bottom: 4%;
  }

  .workFrame p {
    font-size: 18px;
    width: 150%;
    margin-left: -23%;
  }

  .workCircleImg3 {
    margin: 15% -15% 0 0;
  }

  .workCircleImg2 {
    margin: 15% -15% 0 -70px;
  }

  .work-headText {
    top: 38%;
  }

  .workConBtn {
    padding: 18px 50px !important;
  }

  .workBox1 p {
    font-size: 30px;
  }

  .workBox2 p {
    font-size: 30px;
  }

  .workmouseOver p {
    font-size: 30px;
  }

  .workFoorLink a {
    font-size: 2em;
  }

  .workFooter {
    padding-top: 20px !important;
  }

  .contactWidth {
    width: 80%;
    margin-left: 10%;
  }

  .contactWidth h2 {
    font-size: 4em;
  }

  .contactWidth h3 {
    font-size: 3em;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    max-width: 107%;
    height: 456px;
    margin-left: -3%;
    margin-top: -1.5%;
    padding-bottom: 2%;
  }

  .contactPara {
    font-size: 20px !important;
  }

  .contactSubPara {
    font-size: 15px !important;
    line-height: 1.2;
  }

  .contact-arrow img {
    width: 5%;
  }

  .contact-footImg {
    width: 85%;
  }

  .contectIconText p {
    font-size: 1.5em;
    margin-right: 23%;
  }

  .contectIconText2 p {
    font-size: 1.5em;
    right: 10%;
    position: relative;
  }

  .contact-formed {
    font-size: 1.5em;
    line-height: 1;
    height: 60px;
  }

  .btn-warning {
    top: -15%;
    /* left: -35%; */
    width: 160%;
    height: 120%;
    font-size: 1.5em;
    font-family: 'Ricardo-bold';
  }

  .logInnerBg {
    width: 30%;
  }

  .login-arrow img {
    width: 3%;
  }

  .passDots::placeholder {
    font-size: 2.5em;
  }

  .input-group-text {
    font-size: 1rem;
    height: 103%;
    margin-top: -22.5%;
    padding: 0.375rem 0.75rem 0.375rem 1.5rem;
  }

  .signupBodyWidth {
    padding-top: 8%;
    width: 92%;
  }

  .signupFootSpace {
    padding-bottom: 15%;
  }

  .signup-select {
    font-size: 25px !important;
    line-height: 2;
    height: auto;
  }

  .signup-mail {
    padding-left: 10px;
  }

  .signup-select option {
    margin-left: 5%;
  }

  .signupHead h2 {
    font-size: 2.8em;
  }

  .signup-sideHead h2 {
    font-size: 5em;
    width: 150%;
  }

  .signup-para {
    font-size: 3em;
    width: 150%;
  }

  .form-check-input {
    width: 30px !important;
    height: 30px;
    margin-top: 0%;
  }

  .jaTimeHead {
    height: 43rem;
  }

  .jaLuxuryHead {
    height: 40rem;
  }

  .workheadBanner {
    height: 43rem;
  }

  .pawnhead {
    height: 43rem;
  }

  .pawnTitle {
    margin-top: 6%;
  }

  .getstarted.calBtn {
    padding: 10px 0 15px 50px;
  }

  .indexFootSubPage {
    margin-left: -15%;
  }

  .termsFootSubPage {
    margin-left: -10%;
  }

}

/*-----Desktop View------*/
@media (min-width: 2560px) {
  .codeDropBar {
    top: -22%;
    width: 133% !important;
    border-radius: 200px 0 0 200px !important;
  }

  .codePhoneNum {
    max-width: 75% !important;
  }

  .subnav-content {
    top: 121px;
    margin-left: -24.5%;
  }

  .subnav-content a {
    margin-left: 6% !important;
  }

  .subnav-content2 {
    top: 120px;
    margin-left: -24.5%;
  }

  .buttonBox {
    width: 25%;
  }

  .subnav-content2 a {
    margin-left: 6%;
    padding: 5px 60px 5px 50px;
  }

  .navbar ul {
    margin-left: 150px;
  }

  .navbar a {
    font-size: 30px;
  }

  .banner {
    height: 77rem;
    margin-top: 4.2%;
  }

  .banner-taglines h1 {
    font-size: 110px;
  }

  .banner-taglines h4 {
    font-size: 55px;
  }

  .circleOverBox {
    top: 63%;
  }

  .circleOverBox h3 {
    font-size: 40px;
  }

  .circleOverBox h5 {
    font-size: 25px;
    color: #505042;
  }

  .circleOverBox h6 {
    font-size: 18px;
    color: #505042;
  }

  .infoBox2 {
    margin-right: 19%;
    top: 21%;
  }

  .infoBox3 {
    margin-right: -81%;
    top: 47%;
  }

  .box3 {
    height: 600px;
  }

  .tickTextPath h2 {
    font-size: 80px;
  }

  .tickTextPath p {
    font-size: 30px;
  }

  .box4 h2 {
    font-size: 90px;
  }

  .box4 h5 {
    font-size: 55px;
  }

  .box4 p {
    font-size: 45px;
  }

  .box5 h2 {
    font-size: 90px;
  }

  .box5 h5 {
    font-size: 55px;
  }

  .box5 p {
    font-size: 45px;
  }

  .box6 h2 {
    font-size: 90px;
  }

  .box6 h5 {
    font-size: 55px;
  }

  .box6 p {
    font-size: 45px;
  }

  .lineLink {
    font-size: 30px;
  }

  .margin3Img img {
    width: 340px;
  }

  .footer-links a {
    font-size: 20px;
    float: none;
  }

  .footerAlink p {
    font-size: 20px;
  }

  .singaBox {
    background-position: 23%;
  }

  .textImg.clockBg img {
    width: 90%;
    left: 10%;
  }

  .tickTextBox input {
    width: 85%;
  }

  .tickTextBox select {
    width: 85%;
  }

  .tickTextPath h1 {
    font-size: 100px;
  }

  .indexClockOver {
    overflow: hidden;
  }

  .form-control::placeholder {
    font-size: 30px;
  }

  .form-control {
    font-size: 30px;
  }

  .navbar .getstarted.clock {
    font-size: 30px;
    width: 82%;
  }

  input.largerCheckbox {
    width: -15% !important;
  }

  input.indexSmallCheck {
    margin-left: -40%;
  }

  .indexSend {
    margin-left: -35%;
  }

  .indexCheckLine {
    width: 50%;
    margin-top: 2%;
  }

  .indexMobCheck {
    margin-left: -20%;
  }

  .termsText {
    font-size: 25px;
  }

  .tickText table,
  tr,
  td {
    font-size: 33px;
  }

  .tickText img {
    width: 60px;
  }

  .lineLink.third {
    padding-bottom: 250px;
  }

  .tickTextPath.stage4 {
    padding-top: 3%;
  }

  .getstarted.calBtn {
    margin-left: 50px;
    padding: 15px 0 15px 30px;
  }

  .getstarted.calcul {
    height: 63px;
    margin-top: 3%;
  }

  .getstarted.infa {
    width: 92%;
  }

  .aboutBg p {
    margin-left: -12%;
  }

  .circleFrame {
    width: 300px;
    height: 300px;
  }

  .workFrame p {
    font-size: 18px;
    width: 150%;
    margin-left: -30%;
  }

  .workmouseOver h2 {
    font-size: 55px;
  }

  .worktextImg img {
    width: 60%;
  }

  .workCircleImg3 {
    width: 30%;
    margin: 15% -10% 0 0;
  }

  .workCircleImg2 {
    width: 30%;
  }

  .workBox1 {
    width: 80%;
  }

  .workBox2 {
    width: 80%;
  }

  .workmouseOver {
    width: 80%;
  }

  .contact-us-box_body .contact-us-box_body--right img {
    height: 585px;
    margin-left: -2%;
    margin-top: -1%;
    max-width: 104.5%;
  }

  .contectIconText p {
    margin-right: 47%;
  }

  .contectIconText2 p {
    right: 42%;
  }

  .passDots::placeholder {
    font-size: 2.5em;
  }

  .input-group-text {
    margin-top: -23%;
  }

  .v1 {
    margin-left: -10.5%;
  }

  .contact-formed {
    font-size: 1.87em;
  }

  .workmouseOver {
    width: 70%;
  }

  .workmouseOver p {
    font-size: 30px;
  }

  .navbar .getstarted.jobsubBtn {
    width: 110%;
  }

  .jaTimeHead {
    height: 50rem;
  }

  .calheader h2 {
    font-size: 2.1vw;
  }

  .pawnNavBar {
    margin-left: -31%;
  }

  .pawnhead {
    height: 45rem;
  }

  .jobHeadLine {
    margin-left: 1.5%;
  }

  .jobLargeMedia {
    margin-left: -4.5%;
  }

  .indexFootSubPage {
    margin-left: -26%;
  }

  .termsFootSubPage {
    margin-left: -26%;
  }
}