/* start variable */
/* End variable */
/* start holder classes */
.h4::after, .main-heading::after, .whymorjan .container .mainbox > div::after, .sector-services .container .mainbox > div::after, .stepsofproject .container .maincont::after {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto; }

header .container > .row > div:nth-of-type(1) i, header .container > .row > div:nth-of-type(2) > ul, .services .maincont .container .row > div .mainbox > div, .services .maincont .container .row > div .mainbox > div div, .latest-portfolio .container .four-items .item .mainbox .overlay a, .mainsteps .container .row > div .upcont, .portfolio .portshuffle .mainbox .overlay > div, .contactus .container .upform form .inpform i {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%); }

.morjan-video, footer, .stepsofproject, .stepsofproject-motion, .stepsofproject-programming, .stepsofproject-graphic, .banner-inner {
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: contain !important;
  background-repeat: round !important;
  width: 100% !important; }

.whymorjan .container, .services .maincont .container, .latest-portfolio .container, .statistics .container, footer > .container, .sector-services .container, .mainsteps .container, .about-video .container, .maneger-intro .maincont .container, .howtowork .container, .technology-weuse .container, .portfolio, .contactus .container, .joinus .container {
  padding: 50px 0px; }

/* End holder classes */
/* start classes */
.h4 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 25px; }
  .h4::after {
    content: " ";
    height: 5px;
    width: 50px;
    background-color: #9d826f;
    display: block;
    bottom: -6px;
    border-radius: 5px; }

.whbtn {
  background-color: #fff;
  color: #747474;
  border-radius: 10px;
  padding: 7px 30px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: inline-block; }
  .whbtn:hover {
    color: #747474;
    background-color: rgba(255, 255, 255, 0.5); }

.greenbtn {
  background-color: #9d826f;
  color: #fff;
  border-radius: 10px;
  padding: 7px 30px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: inline-block; }
  .greenbtn:hover {
    background-color: #fff;
    color: #9d826f; }

.bambibtn {
  background-color: #9400f3;
  color: #fff;
  border-radius: 10px;
  padding: 7px 30px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: inline-block; }
  .bambibtn:hover {
    background-color: #fff;
    color: #9400f3; }

.bluebtn {
  background-color: #9a8372;
  color: #fff;
  border-radius: 10px;
  padding: 7px 30px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: inline-block; }
  .bluebtn:hover {
    background-color: #fff;
    color: #9a8372; }

.violetbtn {
  background-color: #e419c8;
  color: #fff;
  border-radius: 10px;
  padding: 7px 30px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: inline-block; }
  .violetbtn:hover {
    background-color: #fff;
    color: #e419c8; }

.main-heading {
  text-align: center;
  width: 50%;
  margin: auto;
  position: relative;
  padding: 10px 0;
  margin-bottom: 70px; }
  @media (max-width: 769px) {
    .main-heading {
      width: 100%; } }
  @media (min-width: 770px) and (max-width: 1199px) {
    .main-heading {
      width: 80%; } }
  .main-heading::after {
    content: " ";
    height: 5px;
    width: 50px;
    background-color: #9d826f;
    display: block;
    bottom: 0px;
    border-radius: 5px; }
  .main-heading h3 {
    margin-bottom: 20px; }
  .main-heading p {
    color: #747474; }
    @media (max-width: 576px) {
      .main-heading p {
        font-size: 14px; } }

.intro-description {
  position: relative; }
  .intro-description h2 {
    color: #001f30;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px; }
    @media (max-width: 1199px) {
      .intro-description h2 {
        font-size: 22px; } }
    .intro-description h2::after {
      content: " ";
      height: 5px;
      width: 50px;
      background-color: #001f30;
      display: block;
      bottom: 0px;
      border-radius: 5px;
      position: absolute;
      right: 0; }
  .intro-description p {
    color: #fff;
    line-height: 1.8;
    padding-left: 100px;
    text-align: justify; }
    @media (max-width: 992px) {
      .intro-description p {
        padding-left: 0px;
        line-height: 1.5; } }
    @media (min-width: 993px) and (max-width: 1199px) {
      .intro-description p {
        line-height: 1.5; } }

/* End classes */
/* starting the general */
.container {
  max-width: 1200px;
  margin: auto; }

@font-face {
  font-family: Dubai-Regular;
  src: url(../fonts/Dubai-Regular.otf); }
@font-face {
  font-family: Tajawal-Regular;
  src: url(../fonts/Tajawal-Regular.ttf); }
body {
  font-family: 'Tajawal-Regular';
  font-weight: normal;
  font-style: normal;
  text-align: right; }

a {
  text-decoration: none !important;
  display: inline-block; }

input:focus,
textarea:focus {
  outline: none; }

section {
  overflow: hidden; }

.owl-carousel {
  direction: ltr; }

.row {
  width: 100%;
  margin: auto; }

/* End the general */
/*  starting boxs */
.mockup-programming-group {
  position: relative;
  width: 100%;
  height: 340px;
  margin: auto; }
  .mockup-programming-group img {
    position: absolute; }
    .mockup-programming-group img:nth-of-type(1) {
      width: 100%;
      bottom: 0; }
    .mockup-programming-group img:nth-of-type(2) {
      left: 21%;
      bottom: 10%;
      width: 300px;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
    .mockup-programming-group img:nth-of-type(3) {
      right: 20%;
      width: 50px;
      top: 3%;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }

.mockup-motion-group {
  position: relative;
  width: 100%;
  height: 340px;
  margin: auto; }
  .mockup-motion-group img {
    position: absolute; }
    .mockup-motion-group img:nth-of-type(1) {
      width: 80%;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto; }
    .mockup-motion-group img:nth-of-type(2) {
      left: 10%;
      bottom: 0%;
      width: 90px;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
    .mockup-motion-group img:nth-of-type(3) {
      right: 20%;
      width: 200px;
      top: 3%;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }

.mockup-single-group {
  text-align: center;
  width: 100%;
  height: 340px;
  position: relative; }
  .mockup-single-group img {
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: 0;
    animation-name: mockups;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out; }

.mockup-marketing-group {
  position: relative;
  width: 100%;
  height: 340px;
  margin: auto; }
  .mockup-marketing-group img {
    position: absolute; }
    .mockup-marketing-group img:nth-of-type(1) {
      width: 80%;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto; }
    .mockup-marketing-group img:nth-of-type(2) {
      left: 0px;
      width: 80%;
      bottom: 0px;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }

.mockup-graphic-group {
  position: relative;
  width: 100%;
  height: 340px;
  margin: auto; }
  .mockup-graphic-group img {
    position: absolute; }
    .mockup-graphic-group img:nth-of-type(1) {
      width: 95%;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto; }
    .mockup-graphic-group img:nth-of-type(2) {
      left: -34px;
      width: 100%;
      bottom: 10px;
      animation-name: mockups;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }

.mockup-single-group img {
  width: 100%; }

/*  End boxs */
/* starting header */
header {
  position: absolute;
  z-index: 99999;
  left: 0px;
  top: 0px;
  width: 100%;
  background-color: transparent; }
  header.header-inner .container > .row > div:nth-of-type(2) ul li a {
    color: #000; }
    @media (max-width: 769px) {
      header.header-inner .container > .row > div:nth-of-type(2) ul li a {
        color: #fff; } }
    header.header-inner .container > .row > div:nth-of-type(2) ul li a:hover, header.header-inner .container > .row > div:nth-of-type(2) ul li a.selected {
      color: #000; }
      @media (max-width: 769px) {
        header.header-inner .container > .row > div:nth-of-type(2) ul li a:hover, header.header-inner .container > .row > div:nth-of-type(2) ul li a.selected {
          color: #fff; } }
    header.header-inner .container > .row > div:nth-of-type(2) ul li a::after {
      background-color: #000; }
      @media (max-width: 769px) {
        header.header-inner .container > .row > div:nth-of-type(2) ul li a::after {
          background-color: #fff; } }
  header.header-inner .container > .row > div:nth-of-type(2) ul li:last-of-type a {
    border-color: #000; }
    header.header-inner .container > .row > div:nth-of-type(2) ul li:last-of-type a::after {
      display: none; }
  header .container {
    padding: 20px 0; }
    header .container > .row > div:nth-of-type(1) {
      position: relative; }
      header .container > .row > div:nth-of-type(1) i {
        display: none;
        cursor: pointer;
        color: #000;
        position: absolute;
        left: 10px;
        font-weight: bold;
        cursor: pointer; }
        @media (max-width: 769px) {
          header .container > .row > div:nth-of-type(1) i {
            display: block; } }
        header .container > .row > div:nth-of-type(1) i::before {
          margin-left: 0;
          font-size: 30px; }
      header .container > .row > div:nth-of-type(1) img {
        width: 250px;
        margin: 0 10px; }
        @media (max-width: 992px) {
          header .container > .row > div:nth-of-type(1) img {
            width: 150px; } }
    header .container > .row > div:nth-of-type(2) {
      position: relative; }
      @media (max-width: 769px) {
        header .container > .row > div:nth-of-type(2) {
          display: none;
          height: 300px; } }
      header .container > .row > div:nth-of-type(2) > ul {
        margin-bottom: 0px;
        padding: 0;
        right: 0;
        width: 100%; }
        @media (max-width: 769px) {
          header .container > .row > div:nth-of-type(2) > ul {
            top: 10px;
            transform: translateY(0px);
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 10px; } }
        header .container > .row > div:nth-of-type(2) > ul > li {
          list-style: none;
          display: inline-block;
          position: relative;
          margin: 0 4px; }
          @media (max-width: 769px) {
            header .container > .row > div:nth-of-type(2) > ul > li {
              display: block;
              margin-bottom: 15px; } }
          @media (min-width: 770px) and (max-width: 1199px) {
            header .container > .row > div:nth-of-type(2) > ul > li {
              margin: 0; } }
          header .container > .row > div:nth-of-type(2) > ul > li:last-of-type a {
            border: 1px solid #fff;
            border-radius: 5px; }
            header .container > .row > div:nth-of-type(2) > ul > li:last-of-type a::after {
              display: none; }
          header .container > .row > div:nth-of-type(2) > ul > li > a {
            color: #fff;
            padding: 4px 10px;
            position: relative;
            transition: all 0.35s ease-in-out; }
            @media (min-width: 770px) and (max-width: 1199px) {
              header .container > .row > div:nth-of-type(2) > ul > li > a {
                font-size: 13px;
                padding: 4px; } }
            header .container > .row > div:nth-of-type(2) > ul > li > a:hover, header .container > .row > div:nth-of-type(2) > ul > li > a.selected {
              color: #001f30; }
              header .container > .row > div:nth-of-type(2) > ul > li > a:hover::after, header .container > .row > div:nth-of-type(2) > ul > li > a.selected::after {
                width: 50%; }
            header .container > .row > div:nth-of-type(2) > ul > li > a::after {
              content: " ";
              height: 1px;
              width: 0%;
              background-color: #001f30;
              display: inline-block;
              bottom: -2px;
              transition: all 0.35s ease-in-out;
              position: absolute;
              right: 10px; }
      header .container > .row > div:nth-of-type(2) .morjan-dropdown {
        display: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 40px;
        background-color: aliceblue;
        width: 100%;
        width: 122px; }
        header .container > .row > div:nth-of-type(2) .morjan-dropdown:hover::after {
          border-bottom: 10px solid #001f30; }
        header .container > .row > div:nth-of-type(2) .morjan-dropdown:hover::before {
          border-top: 10px solid #9d826f; }
        header .container > .row > div:nth-of-type(2) .morjan-dropdown::after {
          content: " ";
          border-top: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #fff;
          border-left: 10px solid transparent;
          position: absolute;
          top: -20px;
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto; }
        header .container > .row > div:nth-of-type(2) .morjan-dropdown::before {
          display: none;
          content: " ";
          border-top: 10px solid #fff;
          border-right: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 10px solid transparent;
          position: absolute;
          bottom: -20px;
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto; }
        header .container > .row > div:nth-of-type(2) .morjan-dropdown li {
          display: block;
          background-color: aqua; }
          header .container > .row > div:nth-of-type(2) .morjan-dropdown li a {
            background-color: #fff;
            box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
            display: block;
            padding: 7px 5px;
            font-size: 12px;
            text-align: center;
            color: #747474;
            transition: all 0.35s ease-in-out; }
            header .container > .row > div:nth-of-type(2) .morjan-dropdown li a:hover {
              color: #9d826f !important; }

/* End header */
/* starting banner-home */
.banner-home {
  height: 100vh; }
  @media (min-width: 1600px) {
    .banner-home {
      height: 760px; } }
  .banner-home .carousel {
    height: 100%; }
    .banner-home .carousel ol {
      width: 300px;
      margin: 0;
      transform: rotate(-90deg);
      position: absolute;
      bottom: 40%;
      right: -67px;
      padding: 0; }
      .banner-home .carousel ol li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0 7px; }
      @media (max-width: 1199px) {
        .banner-home .carousel ol {
          transform: rotate(0deg);
          bottom: 30px;
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto; } }
    .banner-home .carousel .carousel-inner {
      height: 100%; }
      .banner-home .carousel .carousel-inner .carousel-item {
        position: relative;
        height: 100%; }
        .banner-home .carousel .carousel-inner .carousel-item > img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0; }
          @media (max-width: 769px) {
            .banner-home .carousel .carousel-inner .carousel-item > img {
              width: auto !important;
              right: 0;
              left: auto; } }
        .banner-home .carousel .carousel-inner .carousel-item .container {
          height: 100%;
          position: relative; }
          .banner-home .carousel .carousel-inner .carousel-item .container .mainbox {
            position: absolute;
            bottom: 10%;
            left: 0;
            width: 100%; }
            @media (max-width: 769px) {
              .banner-home .carousel .carousel-inner .carousel-item .container .mainbox {
                bottom: 20%; } }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox.motion-sector span {
              color: #e70ec9; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox.marketing-sector span {
              color: #2485ca; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox.graphic-sector span {
              color: #6a00cc; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox .row > div {
              position: relative; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox span {
              display: block;
              width: 50px;
              text-align: center;
              font-size: 65px;
              font-weight: bold;
              color: #4a4a4a !important;
              position: absolute;
              top: -10pxpx;
              right: 10px; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox .uptext {
              left: 0;
              width: 100%; }
              .banner-home .carousel .carousel-inner .carousel-item .container .mainbox .uptext p {
                position: relative;
                z-index: 99999; }
            .banner-home .carousel .carousel-inner .carousel-item .container .mainbox .upimage {
              position: relative; }
              @media (max-width: 769px) {
                .banner-home .carousel .carousel-inner .carousel-item .container .mainbox .upimage {
                  display: none; } }

@keyframes mockups {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-30px); } }
/* End banner-home */
/* starting whymorjan */
.whymorjan .container .row > div {
  padding: 0 30px;
  margin-bottom: 70px; }
.whymorjan .container .mainbox {
  text-align: center; }
  .whymorjan .container .mainbox > div {
    position: relative;
    width: 100px;
    margin: auto;
    margin-bottom: 50px; }
    .whymorjan .container .mainbox > div img {
      width: 100px;
      animation-name: whymorjan-icon;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
    .whymorjan .container .mainbox > div::after {
      content: " ";
      height: 5px;
      width: 50px;
      background-color: #000;
      display: block;
      bottom: -30px;
      border-radius: 5px;
      filter: blur(5px);
      animation-name: whymorjan-icon-shadow;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
  .whymorjan .container .mainbox p {
    color: #747474;
    font-size: 15px; }

@keyframes whymorjan-icon {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-30px); } }
@keyframes whymorjan-icon-shadow {
  0% {
    background-color: #000000; }
  100% {
    background-color: #ddd; } }
/* End whymorjan */
/* starting morjan-video */
.morjan-video {
  background: url(../images/morjan-video-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    .morjan-video {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }
  .morjan-video .container {
    padding: 100px 0 50px 0; }
    @media (max-width: 1199px) {
      .morjan-video .container {
        padding: 50px 0; } }
    .morjan-video .container .row > div {
      text-align: center; }
      .morjan-video .container .row > div:first-of-type {
        padding: 50px; }
        @media (min-width: 770px) and (max-width: 1199px) {
          .morjan-video .container .row > div:first-of-type {
            padding: 0 10px; } }
      .morjan-video .container .row > div img {
        width: 300px;
        margin-bottom: 50px; }
        @media (max-width: 769px) {
          .morjan-video .container .row > div img {
            width: 240px; } }
      .morjan-video .container .row > div h2 {
        color: #001f30;
        margin-bottom: 30px; }
        @media (min-width: 770px) and (max-width: 992px) {
          .morjan-video .container .row > div h2 {
            font-size: 28px; } }
      .morjan-video .container .row > div p {
        color: #fff;
        margin-bottom: 30px; }
      .morjan-video .container .row > div iframe {
        width: 100%;
        height: 400px; }

/* End morjan-video */
/* starting services */
.services .main-heading {
  padding-top: 50px;
  margin-bottom: 50px;
  background-color: #fff;
  width: 100%; }
.services .maincont {
  background-color: rgba(134, 111, 94, 0.2); }
  .services .maincont .container .row > div {
    perspective: 1000px;
    text-align: center;
    margin: auto;
    margin-bottom: 30px; }
    .services .maincont .container .row > div:nth-of-type(1) > div {
      background-color: #866f5e; }
    .services .maincont .container .row > div:nth-of-type(2) > div {
      background-color: #cca892; }
    .services .maincont .container .row > div:nth-of-type(3) > div {
      background-color: #866f5e; }
    .services .maincont .container .row > div:nth-of-type(4) > div {
      background-color: #cca892; }
      
    .services .maincont .container .row > div:nth-of-type(5) > div {
      background-color: #cca892; }
    .services .maincont .container .row > div:nth-of-type(6) > div {
      background-color: #866f5e; }
    .services .maincont .container .row > div:nth-of-type(7) > div {
      background-color: #cca892; }
    .services .maincont .container .row > div:nth-of-type(8) > div {
      background-color: #866f5e; }
    .services .maincont .container .row > div .mainbox {
      background-color: aqua;
      height: 250px;
      width: 200px;
      margin: auto;
      border-radius: 10px;
      position: relative;
      transform-style: preserve-3d;
      transition: all 1s ease-in-out; }
      .services .maincont .container .row > div .mainbox:hover {
        transform: rotateY(180deg); }
      .services .maincont .container .row > div .mainbox > div {
        background-color: #fff;
        width: 220px;
        height: 230px;
        left: -10px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
        .services .maincont .container .row > div .mainbox > div.front {
          z-index: 2;
          backface-visibility: hidden; }
        .services .maincont .container .row > div .mainbox > div.back {
          z-index: 1;
          transform: translateY(50%) rotateY(180deg);
          backface-visibility: hidden; }
        .services .maincont .container .row > div .mainbox > div div {
          left: 0;
          width: 100%;
          padding: 10px; }
        .services .maincont .container .row > div .mainbox > div i {
          margin-bottom: 30px; }
          .services .maincont .container .row > div .mainbox > div i::before {
            margin-left: 0;
            color: #747474;
            font-size: 60px; }
        .services .maincont .container .row > div .mainbox > div h5 {
          color: #747474;
          font-size: 15px; }
        .services .maincont .container .row > div .mainbox > div p {
          color: #747474;
          font-size: 15px;
          margin-bottom: 0; }

/* End services */
/* starting latest-portfolio */
.latest-portfolio .container .four-items {
  margin-bottom: 50px;
  position: relative; }
  .latest-portfolio .container .four-items .owl-nav {
    position: absolute;
    top: -45px;
    right: 0;
    margin-top: 0; }
    .latest-portfolio .container .four-items .owl-nav button {
      outline: none;
      margin: 0;
      border-radius: 0;
      background-color: transparent; }
      .latest-portfolio .container .four-items .owl-nav button:focus {
        outline: none; }
    .latest-portfolio .container .four-items .owl-nav span {
      line-height: 30px;
      color: #fff;
      background-color: #9d826f;
      width: 35px;
      display: block;
      height: 35px;
      font-size: 35px;
      margin-left: 5px;
      box-shadow: 0 0 3px rgba(0, 201, 158, 0.75);
      border-radius: 5px;
      transition: all 0.35s ease-in-out; }
      .latest-portfolio .container .four-items .owl-nav span:hover {
        color: #9d826f;
        background-color: transparent; }
  .latest-portfolio .container .four-items .item .mainbox {
    position: relative;
    text-align: center;
    overflow: hidden; }
    .latest-portfolio .container .four-items .item .mainbox:hover .overlay {
      opacity: 1; }
    .latest-portfolio .container .four-items .item .mainbox:hover img {
      transform: scale(1.1); }
    .latest-portfolio .container .four-items .item .mainbox img {
      height: 200px;
      transition: all 0.35s ease-in-out; }
    .latest-portfolio .container .four-items .item .mainbox .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0, 201, 158, 0.3);
      background-color: rgba(0, 0, 0, 0.6);
      transition: all 0.35s ease-in-out;
      opacity: 0; }
      .latest-portfolio .container .four-items .item .mainbox .overlay a {
        display: block;
        width: 100%;
        text-align: centerc;
        color: #001f30; }

.graphic-portfolio .container .main-heading::after {
  background-color: #9400f3; }
.graphic-portfolio .container .four-items .owl-nav span {
  background-color: #9400f3;
  box-shadow: 0 0 3px rgba(148, 0, 243, 0.75); }
  .graphic-portfolio .container .four-items .owl-nav span:hover {
    color: #9400f3; }

.marketing-portfolio .container .main-heading::after {
  background-color: #9a8372; }
.marketing-portfolio .container .four-items .owl-nav span {
  background-color: #9a8372;
  box-shadow: 0 0 3px rgba(37, 154, 228, 0.75); }
  .marketing-portfolio .container .four-items .owl-nav span:hover {
    color: #9a8372; }

.motion-portfolio .container .main-heading::after {
  background-color: #e419c8; }
.motion-portfolio .container .four-items .owl-nav span {
  background-color: #e419c8;
  box-shadow: 0 0 3px rgba(228, 25, 200, 0.75); }
  .motion-portfolio .container .four-items .owl-nav span:hover {
    color: #e419c8; }

/* End latest-portfolio */
/* starting statistics */
.statistics .container .row > div {
  text-align: center;
  color: #747474; }
  @media (max-width: 769px) {
    .statistics .container .row > div {
      margin-bottom: 20px; } }
  .statistics .container .row > div i {
    margin-bottom: 10px; }
    .statistics .container .row > div i::before {
      font-size: 60px;
      margin-left: 0; }
  .statistics .container .row > div span {
    display: block;
    font-size: 50px;
    font-weight: bold;
    font-family: cursive; }
  .statistics .container .row > div p {
    margin-bottom: 0;
    font-size: 15px; }

/* End statistics */
/* starting clients-logos */
.clients-logos {
  margin-bottom: 300px; }
  .clients-logos .container .row > div {
    padding: 30px 5px;
    text-align: center;
    transition: all 0.35s ease-in-out; }

    .clients-logos .container .row > div:not(:nth-of-type(6n+6))
    {
      border-left: 1px solid rgba(0, 0, 0, 0.2);
    }
    .clients-logos .container .row > div:not(:nth-of-type(n + 12))
    {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .clients-logos .container .row > div:hover {
      background-color: rgba(0, 0, 0, 0.1); }


  .clients-logos .container .row .mainbox img {
    width: 150px; }
    @media (max-width: 769px) {
      .clients-logos .container .row .mainbox img {
        width: 100%; } }

/* End clients-logos */
/* starting contact */
.contact {
  background-color: #fafbfe; }
  .contact .container {
    padding: 40px 0px; }
    .contact .container h3 {
      text-align: center;
      margin-bottom: 20px; }
    .contact .container .row {
      margin: auto;
      width: 80%;
      margin-bottom: 30px; }
      @media (min-width: 770px) and (max-width: 992px) {
        .contact .container .row {
          width: 100%; } }
      @media (max-width: 769px) {
        .contact .container .row > div {
          margin: auto;
          margin-bottom: 10px; } }
      .contact .container .row > div > div {
        text-align: center;
        height: 130px;
        padding: 10px;
        border: 1px solid #8a94b0;
        border-radius: 30px;
        position: relative; }
        .contact .container .row > div > div > div {
          position: absolute;
          left: 0px;
          right: 0px;
          margin-left: auto;
          margin-right: auto;
          bottom: 50%;
          transform: translateY(50%); }
        .contact .container .row > div > div img {
          margin-bottom: 10px;
          height: 45px; }
        .contact .container .row > div > div h4 {
          color: #85705e;
          font-size: 16px;
          margin-bottom: 5px; }
        .contact .container .row > div > div p {
          margin-bottom: 0px;
          color: #8a94b0;
          font-size: 13px; }
    .contact .container form {
      text-align: center;
      width: 40%;
      margin: auto; }
      @media (max-width: 769px) {
        .contact .container form {
          width: 100%; } }
      .contact .container form > div {
        margin-bottom: 15px; }
        .contact .container form > div input, .contact .container form > div textarea {
          border: 1px solid #8a94b0;
          width: 100%;
          background-color: transparent;
          padding: 13px;
          border-radius: 20px; }
          .contact .container form > div input::placeholder, .contact .container form > div textarea::placeholder {
            color: #8a94b0;
            font-size: 13px;
            font-style: italic; }
        .contact .container form > div input[type=submit] {
          background: linear-gradient(to right, #9d826f, #c4a18c);
          color: #fff;
          border: none; }
    .contact .container > div:last-of-type {
      text-align: center; }
      .contact .container > div:last-of-type span {
        display: block;
        text-decoration: underline;
        margin-bottom: 10px; }
      .contact .container > div:last-of-type i {
        text-align: center; }
        .contact .container > div:last-of-type i::before {
          background: linear-gradient(to right, #9d826f, #c4a18c);
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 50%;
          transition: all .25s ease-in-out;
          display: block;
          color: #fff;
          margin: 0 7px; }
        .contact .container > div:last-of-type i:hover {
          transform: translateY(-5px); }

/* End contact */
/* starting footer */
footer {
  background: url(../images/footer-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    footer {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }
  @media (max-width: 769px) {
    footer > .container > .row > div {
      padding: 0px 5px; } }
  footer > .container > .row > div h5 {
    margin-bottom: 45px;
    color: #fff;
    font-size: 18px; }
  footer > .container > .row > div:nth-of-type(1) {
    padding-left: 50px; }
    @media (max-width: 576px) {
      footer > .container > .row > div:nth-of-type(1) {
        padding-left: 0;
        text-align: center; } }
    footer > .container > .row > div:nth-of-type(1) img {
      width: 250px;
      margin-bottom: 20px; }
      @media (min-width: 577px) and (max-width: 769px) {
        footer > .container > .row > div:nth-of-type(1) img {
          width: 200px; } }
    footer > .container > .row > div:nth-of-type(1) p {
      color: #fff;
      text-align: justify;
      font-size: 15px; }
  footer > .container > .row > div:nth-of-type(2) a {
    color: #fff;
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    transition: all 0.35s ease-in-out; }
    footer > .container > .row > div:nth-of-type(2) a:hover {
      color: #001f30; }
    footer > .container > .row > div:nth-of-type(2) a i::before {
      margin-left: 5px;
      font-size: 14px;
      display: inline-block;
      animation-name: footer-links;
      animation-duration: .5s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
  footer > .container > .row > div:nth-of-type(3) .row {
    margin-bottom: 20px; }
    footer > .container > .row > div:nth-of-type(3) .row > div {
      padding: 0 3px;
      text-align: right;
      font-size: 14px; }
      @media (max-width: 769px) {
        footer > .container > .row > div:nth-of-type(3) .row > div:last-of-type {
          text-align: left; } }
      footer > .container > .row > div:nth-of-type(3) .row > div img {
        width: 50px;
        height: 50px; }
      footer > .container > .row > div:nth-of-type(3) .row > div h6 {
        color: #fff; }
      footer > .container > .row > div:nth-of-type(3) .row > div span {
        color: #fff; }
  footer > .container > .row > div:nth-of-type(4) {
    text-align: center; }
    footer > .container > .row > div:nth-of-type(4) > div:first-of-type {
      text-align: center;
      margin-bottom: 50px; }
      footer > .container > .row > div:nth-of-type(4) > div:first-of-type a {
        display: inline-block; }
        footer > .container > .row > div:nth-of-type(4) > div:first-of-type a i {
          display: block;
          width: 45px; }
          footer > .container > .row > div:nth-of-type(4) > div:first-of-type a i::before {
            width: 50px;
            margin: 0;
            font-size: 25px;
            color: #fff; }
    footer > .container > .row > div:nth-of-type(4) .row {
      position: relative; }
      footer > .container > .row > div:nth-of-type(4) .row::after {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        filter: blur(45px); }
      footer > .container > .row > div:nth-of-type(4) .row > div {
        text-align: center;
        margin: auto;
        margin-bottom: 10px;
        position: relative;
        z-index: 999; }
  footer .copyright {
    background-color: #866f5e; }
    footer .copyright .container {
      padding: 20px 0; }
      footer .copyright .container .row > div {
        text-align: center; }
        footer .copyright .container .row > div p {
          color: #fff;
          margin-bottom: 0; }

.footer-motion {
  background: url(../images/footer-motion-bg.png); }
  .footer-motion .copyright {
    background-color: #bd15a6; }

.footer-programming {
  background: url(../images/footer-programming-bg.png); }
  .footer-programming .copyright {
    background-color: #01af8e; }

.footer-graphic {
  background: url(../images/footer-graphic-bg.png); }
  .footer-graphic .copyright {
    background-color: #7800c3; }

@keyframes footer-links {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(10px); } }
/* End footer */
/* starting sector-services */
.sector-services .container .row > div {
  padding: 0 30px;
  margin: auto;
  margin-bottom: 70px; }
  @media (max-width: 1199px) {
    .sector-services .container .row > div {
      padding: 0px 10px; } }
.sector-services .container .mainbox {
  text-align: center; }
  .sector-services .container .mainbox > div {
    position: relative;
    width: 100px;
    margin: auto;
    margin-bottom: 50px; }
    .sector-services .container .mainbox > div img {
      width: 100px;
      animation-name: whymorjan-icon;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
    .sector-services .container .mainbox > div::after {
      content: " ";
      height: 5px;
      width: 50px;
      background-color: #000;
      display: block;
      bottom: -30px;
      border-radius: 5px;
      filter: blur(5px);
      animation-name: whymorjan-icon-shadow;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease-in-out; }
  .sector-services .container .mainbox h4 {
    font-size: 22px; }
  .sector-services .container .mainbox p {
    color: #747474;
    font-size: 15px; }

.graphic-services .main-heading::after {
  background-color: #9400f3; }

.marketing-services .main-heading::after {
  background-color: #9a8372; }

.motiongraphic-services .main-heading::after {
  background-color: #e419c8; }

@keyframes whymorjan-icon {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-50px); } }
@keyframes whymorjan-icon-shadow {
  0% {
    background-color: #000000; }
  100% {
    background-color: #ddd; } }
/* End sector-services */
/* starting stepsofproject */
.stepsofproject {
  background: url(../images/stepsofproject-marketing-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    .stepsofproject {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }
  .stepsofproject .container {
    padding: 75px 0; }
    @media (min-width: 1600px) {
      .stepsofproject .container {
        padding: 100px 0; } }
    .stepsofproject .container .maincont {
      text-align: center;
      width: 50%;
      margin: auto;
      position: relative;
      padding: 10px 0; }
      @media (max-width: 769px) {
        .stepsofproject .container .maincont {
          width: 100%; } }
      @media (min-width: 770px) and (max-width: 1199px) {
        .stepsofproject .container .maincont {
          width: 80%; } }
      .stepsofproject .container .maincont::after {
        content: " ";
        height: 5px;
        width: 50px;
        background-color: #fff;
        display: block;
        bottom: 0px;
        border-radius: 5px; }
      .stepsofproject .container .maincont h2 {
        color: #001f30;
        margin-bottom: 20px; }
      .stepsofproject .container .maincont p {
        color: #fff; }

.stepsofproject-motion {
  background: url(../images/stepsofproject-motion-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    .stepsofproject-motion {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }

.stepsofproject-programming {
  background: url(../images/stepsofproject-programming-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    .stepsofproject-programming {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }

.stepsofproject-graphic {
  background: url(../images/stepsofproject-graphic-bg.png);
  height: auto; }
  @media (max-width: 992px) {
    .stepsofproject-graphic {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important; } }

/* End stepsofproject */
/* starting mainsteps */
.mainsteps .container .row > div {
  position: relative;
  margin-bottom: 50px;
  text-align: center; }
  .mainsteps .container .row > div img {
    width: 400px; }
    @media (max-width: 576px) {
      .mainsteps .container .row > div img {
        width: 100%; } }
    @media (min-width: 770px) and (max-width: 992px) {
      .mainsteps .container .row > div img {
        width: 100%; } }
  .mainsteps .container .row > div .upcont {
    width: 100%; }
    @media (max-width: 769px) {
      .mainsteps .container .row > div .upcont {
        position: unset;
        transform: translateY(0px); } }
    .mainsteps .container .row > div .upcont .h4::after {
      background-color: #9d826f; }
    .mainsteps .container .row > div .upcont p {
      color: #747474;
      line-height: 2;
      margin-bottom: 0; }

.mainsteps-graphic .h4::after {
  background-color: #9400f3 !important; }

.mainsteps-marketing .h4::after {
  background-color: #9a8372 !important; }

.mainsteps-motion .h4::after {
  background-color: #e419c8 !important; }

/* End mainsteps */
/* starting banner-inner */
.banner-inner {
  height: 100vh; }
  @media (max-width: 992px) {
    .banner-inner {
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      -o-background-size: cover !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: right !important; } }
  @media (min-width: 1600px) {
    .banner-inner {
      height: 760px; } }
  .banner-inner .container {
    height: 100%;
    position: relative; }
    .banner-inner .container .row {
      width: 100%;
      left: 0;
      position: absolute;
      bottom: 10%; }
      @media (max-width: 769px) {
        .banner-inner .container .row {
          bottom: 20%; } }
      .banner-inner .container .row > div {
        position: relative; }
      .banner-inner .container .row .uptext {
        left: 0;
        width: 100%; }
      .banner-inner .container .row .upimage {
        position: relative; }
        @media (max-width: 992px) {
          .banner-inner .container .row .upimage {
            display: none; } }

.banner-programming {
  background: url(../images/banner-programming-bg.png); }

.banner-marketing {
  background: url(../images/banner-marketing-bg.png); }

.banner-motiongraphic {
  background: url(../images/banner-motiongraphic-bg.png); }

.banner-graphic {
  background: url(../images/banner-graphic-bg.png); }

.banner-joinus {
  background: url(../images/banner-joinus-bg.png); }

/* End banner-inner */
/* starting about-video */
.about-video .container .row > div h2 {
  color: #9d826f;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px; }
  .about-video .container .row > div h2::after {
    content: " ";
    height: 5px;
    width: 50px;
    background-color: #9d826f;
    display: block;
    bottom: 0px;
    border-radius: 5px;
    position: absolute;
    right: 0; }
.about-video .container .row > div p {
  color: #747474;
  text-align: justify; }
  .about-video .container .row > div p span {
    color: #9d826f; }
.about-video .container .row > div h6 {
  color: #9d826f; }
.about-video .container .row > div iframe {
  height: 350px; }

/* End about-video */
/* starting maneger-intro */
.maneger-intro {
  background-color: #EFF5F4;
  padding: 10px 0 50px 0; }
  .maneger-intro h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #9d826f;
    font-size: 24px; }
  .maneger-intro .maincont {
    background-color: #9d826f; }
    .maneger-intro .maincont .container > div {
      width: 60%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      padding: 80px 30px 30px 30px; }
      .maneger-intro .maincont .container > div::after {
        content: " ";
        position: absolute;
        top: -10px;
        left: -10px;
        width: 100%;
        height: 100%;
        border: 2px solid #000;
        border-radius: 10px;
        transition: all 0.35s ease-in-out; }
      .maneger-intro .maincont .container > div:hover::after {
        top: 0;
        left: 0; }
      .maneger-intro .maincont .container > div:hover .name {
        box-shadow: 0 0 0 #d2b39d; }
      .maneger-intro .maincont .container > div .name {
        position: absolute;
        top: 30px;
        right: 10px;
        background-color: #9d826f;
        color: #fff;
        padding: 5px;
        box-shadow: -10px 5px 0px #d2b39d;
        transition: all 0.35s ease-in-out; }
      .maneger-intro .maincont .container > div p {
        color: #9d826f; }

/* End maneger-intro */
/* starting howtowork */
.howtowork .container .row > div {
  text-align: center;
  margin: auto;
  margin-bottom: 30px;
  padding: 0 50px; }
  .howtowork .container .row > div .mainbox img {
    width: 150px;
    animation-name: howtowork;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out; }
  .howtowork .container .row > div .mainbox div {
    width: 1px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 10px auto; }
  .howtowork .container .row > div .mainbox p {
    height: 50px; }
  .howtowork .container .row > div .one p {
    color: #1ADCB3; }
  .howtowork .container .row > div .two p {
    color: #A220F6; }
  .howtowork .container .row > div .three p {
    color: #2D55C6; }
  .howtowork .container .row > div .four p {
    color: #DA2569; }
  .howtowork .container .row > div .five p {
    color: #D900A9; }
  .howtowork .container .row > div .six p {
    color: #31BBEA; }
  .howtowork .container .row > div .seven p {
    color: #33CD7C; }

@keyframes howtowork {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2); } }
/* End howtowork */
/* starting technology-weuse */
.technology-weuse {
  background-color: #EFF5F4; }
  .technology-weuse .container > div:last-of-type {
    text-align: center; }
  .technology-weuse .container > div:not(:first-of-type) {
    padding: 30px 0;
    margin-bottom: 10px; }
  .technology-weuse .container > div:nth-of-type(2) {
    background-color: #8BFFE7; }
  .technology-weuse .container > div:nth-of-type(3) {
    background-color: #EABCF6; }
  .technology-weuse .container > div:nth-of-type(4) {
    background-color: #FFB7F5; }
  .technology-weuse .container > div:nth-of-type(5) {
    background-color: #ABF0FF; }
  .technology-weuse .container .techlogos h4 {
    text-align: center;
    margin-bottom: 20px; }
  .technology-weuse .container .techlogos .row > div {
    text-align: center; }
    .technology-weuse .container .techlogos .row > div > div {
      width: 90px;
      margin: auto;
      padding: 10px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
      .technology-weuse .container .techlogos .row > div > div img {
        width: 100%; }

/* End technology-weuse */
/* starting portfolio */
.portfolio {
  background-color: #F9F9F9; }
  .portfolio .portshuffle ul {
    margin-bottom: 50px;
    text-align: center;
    padding: 0; }
    .portfolio .portshuffle ul li {
      display: inline-block;
      transition: all 0.35s ease-in-out;
      padding: 3px 10px;
      cursor: pointer;
      background-color: #fff;
      margin: 0 5px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
      @media (max-width: 576px) {
        .portfolio .portshuffle ul li {
          margin-bottom: 10px; } }
      .portfolio .portshuffle ul li:hover {
        color: #fff;
        background-color: #747474; }
    .portfolio .portshuffle ul li.selected {
      color: #fff;
      background-color: #747474; }
  .portfolio .portshuffle .row {
    width: 100%;
    margin: auto; }
    .portfolio .portshuffle .row > div {
      padding: 0; }
  .portfolio .portshuffle .mainbox {
    position: relative;
    overflow: hidden; }
    .portfolio .portshuffle .mainbox img {
      width: 100%;
      height: 260px;
      transition: all 0.35s ease-in-out; }
      @media (max-width: 576px) {
        .portfolio .portshuffle .mainbox img {
          height: 126px; } }
      @media (min-width: 770px) and (max-width: 992px) {
        .portfolio .portshuffle .mainbox img {
          height: 206.5px; } }
      @media (min-width: 993px) and (max-width: 1199px) {
        .portfolio .portshuffle .mainbox img {
          height: 191.5px; } }
    .portfolio .portshuffle .mainbox:hover img {
      transform: scale(1.2); }
    .portfolio .portshuffle .mainbox .overlay {
      position: absolute;
      background: rgba(0, 0, 0, 0.6);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all 0.35s ease-in-out; }
      .portfolio .portshuffle .mainbox .overlay > div {
        width: 100%;
        text-align: center; }
        .portfolio .portshuffle .mainbox .overlay > div a {
          color: #fff;
          display: inline-block;
          margin: 0 10px;
          border-bottom: 1px solid;
          transition: all 0.35s ease-in-out; }
          .portfolio .portshuffle .mainbox .overlay > div a:hover {
            color: #001f30; }
    .portfolio .portshuffle .mainbox:hover .overlay {
      opacity: 1; }
  .portfolio #Container .mix {
    display: none; }

/* End portfolio */
/* starting contactus */
.contactus {
  background-color: #F9F9F9; }
  .contactus .container .contdetails h4 {
    color: #000;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px; }
    .contactus .container .contdetails h4 span {
      color: #9d826f; }
    .contactus .container .contdetails h4::after {
      content: " ";
      height: 5px;
      width: 50px;
      background-color: #9d826f;
      display: block;
      bottom: 0px;
      border-radius: 5px;
      position: absolute;
      right: 0; }
  .contactus .container .contdetails > p {
    margin-bottom: 50px; }
  .contactus .container .contdetails .row {
    margin-bottom: 20px; }
    .contactus .container .contdetails .row > div > div {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: auto;
      border: 1px solid rgba(0, 0, 0, 0.35);
      border-radius: 5px; }
    .contactus .container .contdetails .row > div img {
      height: 25px; }
    .contactus .container .contdetails .row > div p {
      margin-bottom: 0;
      line-height: 2.5; }
  .contactus .container .upform form {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #9d826f; }
    .contactus .container .upform form .row > div {
      margin-bottom: 30px; }
      .contactus .container .upform form .row > div:last-of-type {
        text-align: center;
        margin-bottom: 0; }
    .contactus .container .upform form .inpform {
      position: relative; }
      .contactus .container .upform form .inpform i {
        width: 45px;
        text-align: center;
        border-left: 1px solid #9d826f; }
        .contactus .container .upform form .inpform i::before {
          margin: 0;
          color: #85705e; }
      .contactus .container .upform form .inpform input {
        width: 100%;
        border-radius: 5px;
        border: 1px solid #9d826f;
        padding: 6px 50px 6px 5px;
        background-color: transparent; }
        .contactus .container .upform form .inpform input::placeholder {
          font-size: 14px; }
    .contactus .container .upform form textarea {
      width: 100%;
      border-radius: 5px;
      border: 1px solid #9d826f;
      padding: 6px 50px 6px 5px;
      background-color: transparent; }
      .contactus .container .upform form textarea::placeholder {
        font-size: 14px; }
    .contactus .container .upform form input[type=submit] {
      display: inline-block;
      background-color: #9d826f;
      color: #fff;
      border-radius: 5px;
      padding: 7px 30px;
      border: none; }

/* End contactus */
/* starting joinus */
.joinus .container .main-heading::after {
  background-color: #9a8372; }
.joinus .container .row > div h3 {
  background-color: #9a8372;
  padding: 15px 30px 15px 10px;
  font-size: 24px;
  border-radius: 10px;
  margin-bottom: 14px;
  color: #fff; }
.joinus .container .row > div .quest {
  position: relative;
  width: 100%;
  margin: auto;
  margin-bottom: 14px;
  padding: 0px;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-radius: 10px; }
.joinus .container .row > div h5 {
  color: #9a8372;
  font-size: 18px;
  padding: 15px 15px 15px 30px;
  border-radius: 10px;
  margin-bottom: 0px; }
  .joinus .container .row > div h5::after {
    content: "\f114";
    font-family: 'Flaticon';
    position: absolute;
    left: 30px;
    top: 13px;
    color: #fff;
    background-color: #9a8372;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    transition: all ease-in-out 0.4s; }
    @media (max-width: 769px) {
      .joinus .container .row > div h5::after {
        left: 5px; } }
  .joinus .container .row > div h5.cssp::after {
    transform: rotate(-180deg); }
  .joinus .container .row > div h5 i::before {
    margin-left: 10px; }
.joinus .container .row > div ul {
  display: none;
  padding: 20px 30px 15px 10px;
  color: #3b1f70;
  font-size: 14px;
  border-radius: 10px; }
  .joinus .container .row > div ul li {
    list-style: arabic-indic;
    margin-bottom: 10px; }
    .joinus .container .row > div ul li:last-of-type {
      list-style: none;
      text-align: center; }
.joinus .container .row > div img {
  width: 100%; }

/* End joinus */
/* starting social-media */
.social-media {
  position: fixed;
  left: 0;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 99999; }
  @media (max-width: 769px) {
    .social-media {
      bottom: 0;
      transform: translateY(0px); } }
  .social-media ul {
    padding: 20px;
    margin: 0;
    text-align: center;
    width: 75px; }
    .social-media ul li {
      display: block;
      margin-bottom: 10px;
      text-align: center; }
      .social-media ul li a img {
        width: 35px; }

/* End social-media */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/* starting */
/* End */
/*@media (max-width: 576px)
@media (min-width: 577px) and (max-width: 769px)
@media (min-width: 770px) and (max-width: 992px)
@media (min-width: 993px) and (max-width: 1199px)*/
/* starting button-top */
#button-top {
  background-color: #000;
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none;
  cursor: pointer;
  line-height: 40px;
  color: #fff;
  opacity: 0.8; }
  #button-top i::before {
    margin-left: 0; }

#button-top:hover i {
  opacity: 0.5; }

/*  End button-top */
/* media query  */
@media (max-width: 320px) {
  .container {
    max-width: 300px !important; } }
@media (min-width: 360px) {
  .container {
    max-width: 340px !important; } }
@media (min-width: 410px) {
  .container {
    max-width: 390px !important; } }
@media (min-width: 576px) {
  .container {
    max-width: 540px !important; } }
@media (min-width: 769px) {
  .container {
    max-width: 720px !important; } }
@media (min-width: 992px) {
  .container {
    max-width: 960px !important; } }
@media (min-width: 1200px) {
  .container {
    max-width: 1170px !important; } }
/* End @media */

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