/***********************Preloader**********************/
    .preloader {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
      position: fixed;
      overflow: hidden !important;
      top: 0;
      left: 0;
      z-index: 99999;
      -webkit-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      margin: 0 auto;
    }

    /*------------------ Modal Animation--------------- */
    #demoGif {
      width: 8rem;
      height: 8rem;
      background-color: white;
    }

    .fade2 {
      transform: scale(0.9);
      opacity: 0;
      transition: all .2s linear;
      display: block !important;
      transition: .3s;
      z-index: -9999;
    }

    .fade2.show {
      opacity: 1;
      transform: scale(1);
      z-index: 9999;
    }

    .form-floating .form-control {
      transform: scaleY(0.85);
    }

    /*------------------ Body--------------- */
    #siteIcon {
      width: 2.8rem;
      /* height: 2.8rem; */
    }

    .shadowSubtel {
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }

    /* Input Mask */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .transparentWhite {
      background-color: #fdfdfddd;
    }

    .backDropBlur {
      backdrop-filter: blur(8px);
    }

    /*---------------Header---------------*/
    .topNavBar {
      z-index: 100;
      background-color: transparent !important;
      /* backdrop-filter: blur(10px);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; */
    }

    .nav-link {
      font-weight: 600 !important;
      font-size: 1.05rem !important;
    }

    /*---------------Animated Button---------------*/

    .btn-11 {
      border: none;
      background: rgb(251, 33, 117);
      background-image: linear-gradient(to bottom right, #00c6ff 0%, #0073ffc0 100%);
      color: #fff;
      overflow: hidden;
      transition: .5s;
      border-radius: 20px;
      background-size: 200% auto;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

    .btn-11:before {
      position: absolute;
      content: '';
      display: inline-block;
      top: -180px;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      animation: shiny-btn1 4s ease-in-out infinite;
      overflow: hidden !important;
      border-radius: 20px;
    }

    .btn-11:hover {
      background-position: right center;
      color: white;
    }

    @-webkit-keyframes shiny-btn1 {
      0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
      }

      80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
      }

      81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
      }

      100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
      }
    }

    @keyframes shiny-btn1 {
      0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
      }

      80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
      }

      81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
      }

      100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
      }
    }

    /*---------------Features---------------*/
    ::selection {
      background-color: transparent;
      color: rgb(153, 0, 255);
    }

    .fp-watermark {
      display: none !important;
    }

    /*---------------FullPage.js Css---------------*/
    .fullpage-wrapper {
      width: 100% !important;
      transform: none !important;
    }

    .fullpage-wrapper .fp-section {
      width: 100% !important;
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
      opacity: 0;
      z-index: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .fullpage-wrapper .fp-section.active {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .fullpage-wrapper .fp-section .fp-slidesContainer {
      width: 100% !important;
      transform: none !important;
    }

    .fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide {
      width: 100% !important;
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
      opacity: 0;
      z-index: 0;
      transition: all 0.3s ease-in-out;
    }

    .fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide.active {
      visibility: visible;
      opacity: 1;
      z-index: 1;
    }

    .fullpage {
      font-size: 10rem;
      background-color: red !important;
    }

    section {
      text-align: center;
    }

    /*---------------Monitor---------------*/
    #monitor {
      max-width: 500px;
      height: 300px;
      background: #000000;
      border-radius: 20px 20px 0px 0px;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #monitorStand {
      height: 5rem;
      max-width: 500px;
      background: url("../background/monitorBase.png");
      background-size: 100%;
      background-repeat: no-repeat;
    }

    #screen {
      width: 97%;
      height: 95%;
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      transform-style: preserve-3d;
      transform: translateZ(-300px);
    }

    #screen video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
    }

    /*---------------Sections---------------*/
    .firstSection {
      background: rgb(255, 255, 255);
      background: radial-gradient(circle,
          rgba(255, 255, 255, 1) 0%,
          rgb(200, 204, 215) 72%);
      transition: all 1s ease-in-out;
    }

    #firstSectionBackgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      width: 102%;
      height: 110%;
      object-fit: cover;
    }

    #firstSectionBackgroundImageCopy {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      width: 102%;
      height: 110%;
      object-fit: cover;
    }

    #secondSectionBackgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #secondSectionCopyBackgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
    }

    #thirdSectionBackgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 200%;
      background-position: center;
    }

    #fourthSectionBackgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 200%;
      background-position: center;
    }

    #firstSectionMovingCircle {
      background: url("../background/circles.svg");
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 200%;
      background-position: center;
    }

    #secondSectionMovingCircle {
      background: url("../background/circles.svg");
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 190%;
      background-position: cover;
      filter: hue-rotate(40deg);
    }

    #secondSectionCopyMovingCircle {
      background: url("../background/circles.svg");
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 190%;
      background-position: cover;
      filter: hue-rotate(40deg);
    }

    #thirdSectionMovingCircle {
      background: url("../background/circles.svg");
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 190%;
      background-position: cover;
      filter: hue-rotate(65deg);
    }

    #fourthSectionMovingCircle {
      background: url("../background/circles.svg");
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      height: 100%;
      width: 100%;
      background-size: 160%;
      background-position: cover;
    }

    #cloudAnimation {
      width: 80%;
      height: 100%;
    }

    /*---------------FEATURE-4 CSS--------------------*/
    .feature-style-4 {
      padding-top: 3rem;
    }

    .feature-style-4 .-mt-30 {
      margin-top: -30px;
    }

    .feature-style-4 .single-feature {
      padding: 30px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
      min-height: 15rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .feature-style-4 .single-feature {
        padding: 40px 20px;
        color: white;
      }
    }

    .feature-style-4 .single-feature .icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: white;
      color: #ffffff;
      font-size: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }

    .feature-style-4 .single-feature .content {
      color: white;
    }

    .feature-style-4 .row .col-md-6:nth-child(1) .single-feature {
      background: hsla(239, 94%, 14%, 1);

      background: linear-gradient(90deg,
          hsla(239, 94%, 14%, 1) 0%,
          hsla(190, 68%, 50%, 1) 100%);

      background: -moz-linear-gradient(90deg,
          hsla(239, 94%, 14%, 1) 0%,
          hsla(190, 68%, 50%, 1) 100%);

      background: -webkit-linear-gradient(90deg,
          hsla(239, 94%, 14%, 1) 0%,
          hsla(190, 68%, 50%, 1) 100%);
    }

    .feature-style-4 .row .col-md-6:nth-child(2) .single-feature {
      background: hsla(212, 35%, 58%, 1);

      background: linear-gradient(90deg,
          hsla(212, 35%, 58%, 1) 0%,
          hsla(218, 32%, 80%, 1) 100%);

      background: -moz-linear-gradient(90deg,
          hsla(212, 35%, 58%, 1) 0%,
          hsla(218, 32%, 80%, 1) 100%);

      background: -webkit-linear-gradient(90deg,
          hsla(212, 35%, 58%, 1) 0%,
          hsla(218, 32%, 80%, 1) 100%);
    }

    .feature-style-4 .row .col-md-6:nth-child(3) .single-feature {
      background: hsla(238, 100%, 71%, 1);

      background: linear-gradient(90deg,
          hsla(238, 100%, 71%, 1) 0%,
          hsla(295, 100%, 84%, 1) 100%);

      background: -moz-linear-gradient(90deg,
          hsla(238, 100%, 71%, 1) 0%,
          hsla(295, 100%, 84%, 1) 100%);

      background: -webkit-linear-gradient(90deg,
          hsla(238, 100%, 71%, 1) 0%,
          hsla(295, 100%, 84%, 1) 100%);
    }

    .feature-style-4 .row .col-md-6:nth-child(4) .single-feature {
      background: hsla(138, 82%, 69%, 1);

      background: linear-gradient(90deg,
          hsla(138, 82%, 69%, 1) 0%,
          hsla(186, 100%, 50%, 1) 100%);

      background: -moz-linear-gradient(90deg,
          hsla(138, 82%, 69%, 1) 0%,
          hsla(186, 100%, 50%, 1) 100%);

      background: -webkit-linear-gradient(90deg,
          hsla(138, 82%, 69%, 1) 0%,
          hsla(186, 100%, 50%, 1) 100%);
    }

    .feature-style-4 .single-feature .content h5 {
      font-weight: 600;
      margin-bottom: 25px;
    }

    .feature-style-4 .feature-content {
      margin-bottom: 40px;
    }

    @media only screen and (min-width: 1400px) {
      .feature-style-4 .feature-content {
        padding-left: 50px;
      }
    }

    @media only screen and (min-width: 1200px) and (max-width: 1399px) {
      .feature-style-4 .feature-content {
        padding-left: 30px;
      }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .feature-style-4 .feature-content h4 {
        font-size: 20px;
      }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .feature-style-4 .feature-content h3 {
        font-size: 34px;
      }
    }

    /* -----------Testimonial------------------ */
    .fp-arrow.fp-prev {
      border-radius: 5px;
      left: 25rem;
      border-width: 18px 14px 18px 0;
      border-color: transparent #00000087 transparent transparent;
    }

    .fp-arrow.fp-next {
      border-radius: 5px;
      right: 25rem;
      border-width: 18px 0 18px 14px;
      border-color: transparent transparent transparent #00000087;
    }

    .testimonialDescription {
      font-size: 1.1rem;
    }

    /* -----------Client Images------------------ */
    .clientImage {
      height: 10rem;
      width: 10rem;
      border-radius: 10px;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }


    /*****************Footer*********************/

	footer{
		background:#d3dcf8;
	}



    /* ------------------------Feature Page--------------------------- */
    /* ------------------------Feature Page--------------------------- */
    .phone {
      position: relative;
      background: black;
      height: 500px;
      width: 250px;
      border-radius: 25px;
      margin: 0 auto;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }

    .phone .camera {
      position: absolute;
      background-image: url("../background/lens.png");
      background-size: cover;
      height: 12px;
      width: 12px;
      border-radius: 15px;
      top: 19px;
      left: 80px;
      overflow: hidden;
    }

    .phone .speaker {
      position: absolute;
      background: #3a3a3a;
      height: 4px;
      width: 50px;
      border-radius: 15px;
      top: 22px;
      left: 105px;
    }

    .phone .sleep-button {
      position: absolute;
      background: #1e1e1e;
      height: 35px;
      width: 3px;
      border-top-right-radius: 3px 3px;
      border-bottom-right-radius: 3px 3px;
      top: 105px;
      left: 250px;
    }

    .phone .silent-switch {
      position: absolute;
      background: #1e1e1e;
      height: 25px;
      width: 3px;
      border-top-left-radius: 3px 3px;
      border-bottom-left-radius: 3px 3px;
      top: 60px;
      left: -3px;
    }

    .phone .volume {
      position: absolute;
      background: #1e1e1e;
      width: 3px;
      height: 35px;
      border-top-left-radius: 3px 3px;
      border-bottom-left-radius: 3px 3px;
      left: -3px;
    }

    .phone .up {
      top: 105px;
    }

    .phone .down {
      top: 145px;
    }

    .phone .screen {
      position: absolute;
      overflow: hidden;
      /* background: #fff; */
      border: solid 1px rgba(255, 255, 255, 0.129);
      height: 396px;
      width: 230px;
      top: 50px;
      left: 10px;

      background-size: cover;
    }

    .phone .home-button {
      position: absolute;
      border: 2px solid #7A7A7A;
      height: 35px;
      width: 35px;
      border-radius: 25px;
      bottom: 12px;
      left: 50%;
      margin-left: -18px;
      animation: pulse 2s ease-in-out 1s infinite;
    }

    @keyframes pulse {
      0% {
        border: 2px solid #7A7A7A;
      }

      50% {
        border: 2px solid #c2c2c2;
      }

      100% {
        border: 2px solid #7A7A7A;
      }
    }

    /* Feature */
    .featurePage section:nth-child(3n+1) #thirdSectionMovingCircle {
      filter: hue-rotate(45deg);
    }

    .featurePage section:nth-child(3n+2) #thirdSectionMovingCircle {
      filter: hue-rotate(170deg);
    }

    .featurePage section:nth-child(3n+3) #thirdSectionMovingCircle {
      filter: hue-rotate(0deg);
    }


    .featurePage section:nth-child(1) #firstSectionBackgroundImage {
      filter: hue-rotate(0deg);
    }

    .featurePage section:nth-child(3n+1) #firstSectionBackgroundImage {
      filter: hue-rotate(0deg);
    }

    .featurePage section:nth-child(3n+2) #firstSectionBackgroundImage {
      filter: hue-rotate(70deg);
    }

    .featurePage section:nth-child(3n+3) #firstSectionBackgroundImage {
      filter: hue-rotate(-80deg);
    }

    .featurePage .subHeading {
      font-size: 18px;
    }

    .featureContainer {
      border: grey;
      border-radius: 10px;
      padding: 1rem;
      min-height: 27rem;
    }

    .featureContainer .animatedContainer {
      height: 100%;
    }

    .featureItem li {
      text-align: start;
    }

    .featureContainer .animatedContainer::after {
      height: 100%;
      width: 40%;
      z-index: 1;
      position: absolute;
      right: 0;
      bottom: 0;
      background-size: cover;
    }

    .featurePage section:nth-child(3n+1) .animatedContainer {
      background: linear-gradient(135deg, #cd7ee7, #990fc7);
    }

    .featurePage section:nth-child(3n+2) .animatedContainer {
      background: linear-gradient(135deg, #ffb88c, #de6262);
    }

    .featurePage section:nth-child(3n+3) .animatedContainer {
      background: linear-gradient(135deg, #00c6fb, #005bea);
    }



    .animatedContainer {
      cursor: pointer;
      border-radius: 15px;
      position: relative;
      padding: 25px 30px;
      color: white;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      border-radius: 10px;
      transition: all 0.4s ease-in-out;
    }

    .animatedContainer::after {
      content: "";
      background: url("../background/backgroundCircle.svg");
      background-position: left;
      background-repeat: no-repeat;
      height: 100%;
      width: 40%;
      z-index: 1;
      position: absolute;
      right: 0;
      bottom: 0;
      background-size: 100%;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
    }

    .animatedContainer:hover::after {
      height: 100%;
      width: 60%;
    }

    /* Contact Page */
    /* Contact Page */
    .contactPage .heading-section {
      font-size: 28px;
      color: #000;
    }

    .contactPage .img {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .contactPage .form-control {
      height: 42px;
      background: #fff;
      color: rgba(0, 0, 0, 0.8);
      font-size: 14px;
      border-radius: 5px;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border: 1px solid rgba(0, 0, 0, 0.07);
    }

    .contactPage .form-control::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .contactPage .form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .contactPage .form-control:-moz-placeholder {
      /* Firefox 18- */
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .contactPage .form-control:focus,
    .contactPage .form-control:active {
      border-color: #a87de3 !important;
    }

    textarea.form-control {
      height: inherit !important;
    }

    .contactPage .wrapper {
      width: 100%;
    }

    .contactPage .dbox {
      width: 100%;
      margin-bottom: 25px;
    }

    .contactPage .dbox p {
      margin-bottom: 0;
    }

    .contactPage .dbox p span {
      font-weight: 500;
      color: #000;
    }

    .contactPage .dbox p a {
      text-decoration: none;
    }

    .contactPage .dbox .icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #0073ffc0;
      margin: 0 auto;
      margin-bottom: 10px;
    }

    .contactPage .dbox .icon span {
      font-size: 20px;
      color: #fff;
    }

    .contactPage .dbox .text {
      width: 100%;
    }

    .contactPage .btn {
      padding: 8px 16px;
      cursor: pointer;
      border-width: 1px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 400;
      -webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
      -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
      position: relative;
      margin-bottom: 10px;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
    }


    .contactPage .btn:hover,
    .contactPage .btn:active,
    .contactPage .btn:focus {
      outline: none !important;
    }

    .contactPage .btn.btn-primary {
      background: #0073ffc0 !important;
      border-color: #956bd0 !important;
      color: #fff;
    }

    .contactPage .btn.btn-primary:hover,
    .contactPage .btn.btn-primary:focus {
      border-color: #7d82e3 !important;
      background: #7d82e3 !important;
    }

    /* .contactPage .contactForm .form-control {
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    } */

    .supportPage .contactForm .form-control {
      border: 1px solid rgba(0, 0, 0, 0.046);
      padding: 0.6rem;
    }

    #contactForm .error {
      color: red;
      font-size: 12px;
    }

    #contactForm .form-control {
      font-size: 16px;
    }

    #message {
      resize: vertical;
    }

    #form-message-warning,
    #form-message-success {
      display: none;
    }

    #form-message-warning {
      color: red;
    }

    #form-message-success {
      color: #28a745;
      font-size: 18px;
      font-weight: 500;
    }

    .contactPage .submitting {
      float: left;
      width: 100%;
      padding: 10px 0;
      display: none;
      font-size: 16px;
      font-weight: bold;
    }

    /* About Us Page */
    /* About Us Page */
    .aboutUsItem {
      background-color: rgba(240, 240, 240, 0.9);
    }

    /* Our Agent Page */
    /* Our Agent Page */


    .agentContainer .animatedContainer {
      min-height: 11rem;
      padding: 0.7rem;
      background: linear-gradient(135deg, #00c5fbab, #005bea);
    }

    .agentContainer .agentImage {
      border-radius: 10px;
      width: 100%;
      height: 100%;

    }