/* =================== 
   All Rights Reserved By DiGiVi
 =================== */

/* =================== 
   Common
 =================== */

 html,
 body {
   height: 100%;
   width: 100%;
   font-size: 15px;
   font-family: 'Sen' !important;
   -webkit-font-smoothing: antialiased;
   background-color: white;
   margin: 0px;
 }
 #includedContent {
   display: unset;
 }
 .mt-30 {
   margin-top: 30px !important;
 }
 button:focus,
 button:active {
   outline: 0;
 }
 .particles-js-canvas-el {
   position: absolute;
   top: 0px;
 }
 .display-none {
   display: none !important;
 }
 .display-inline {
   display: inline;
 }
 .hide {
   display: none;
 }
 .loader {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 1;
   width: 150px;
   height: 150px;
   margin: -75px 0 0 -28px;
   border: 5px solid #f3f3f3;
   border-radius: 50%;
   border-top: 5px solid rgb(94, 94, 94);
   width: 40px;
   height: 40px;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
 }
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(360deg);
   }
 }
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 .dotted-bg {
   background: linear-gradient(90deg, #f2f2f2 21px, transparent 1%) center, linear-gradient(#f2f2f2 21px, transparent 1%) center, #b5b5b5;
   background-size: 22px 22px;
   padding: 20px 10px;
 }
 /* =================== 
    Top Section 
  =================== */
 
 #wrapper {
   background: url(../assets/banner.png) no-repeat;
   height: 55%;
   width: 100%;
   position: relative;
   background-position: center;
   margin: 0;
   padding: 0;
   border: 0;
   background-size: cover;
   box-shadow: 0px 0px 25px 15px #cacaca;
   border-radius: 0 0 50% 50%/4%;
 }
 #wrapper img {
   height: 170px;
   border-radius: 10px;
   box-shadow: 0px 0px 25px 1px black;
   
 }
 #wrapper td {
   vertical-align: middle;
   text-align: center;
   position: relative;
   z-index: 1;
 }
 #wrapper h2 {
   color: #f0464e;
   margin: 3px;
   font-family: Sen;
   font-size: 26px;
   margin-top: 15px;
 }
 #wrapper .company-image {
   border-radius: 0px;
   box-shadow: none;
   border: none;
   height: 40px;
   margin-right: 10px;
   margin-top: 10px;
 }
 .individual #wrapper .company-image {
   height: 40px;
 }
 .corporate #wrapper .company-image {
   height: 80px;
 }
 #wrapper .company-title {
   font-family: 'Open Sans', sans-serif;
   color: white;
   border-top: solid 2px #77b150;
   padding-top: 10px;
   margin: 0px 10%;
   margin-top: 10px;
 }
 #wrapper h4 {
   color: #e9e9e9;
   margin: 1px;
   font-size: 16px;
   font-weight: 400;
 }
 .top-logo {
   position: absolute;
   left: 10px;
   top: 0px;
 }
 .top-home {
   position: absolute;
   right: 40px;
   top: -5px;
 }
 .top-home button {
   background-color: transparent;
   color: #ffffff;
   font-size: 24px;
 }
 .top-language {
   position: absolute;
   right: 50px;
   top: 0px;
 }
 .top-language a {
   background: transparent;
   color: #d2d2d2;
   border-right: none;
   text-decoration: none;
   margin-bottom: 3px;
   display: inline-block;
   border-radius: 10px;
   text-align: center;
   margin: 5px;
 }
 .top-language .btn {
   background-color: transparent !important;
 }
 .top-language .btn i {
   font-size: 18px;
 }
 .btn {
   background-color: #2196F3;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   outline: none;
 }
 .dropdown {
   position: absolute;
   display: inline-block;
 }
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 100px;
   z-index: 1;
   top: 0px;
   right: 0px;
 }
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
 /* =================== 
    Info Section 
  =================== */

  .owner-section {
    text-align: center;
  }
  .owner-section img {
    height: 210px;
    margin-top: 30px;
    border-radius: 10px;
  }
  .owner-section h2 {
    color: #211e63;
    margin: 0px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
 
 .circular {
   display: block;
   margin: 15px 10px;
   background: #f1f1f1f1;
   position: relative;
   padding: 0px 0px;
   height: 52px;
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   border-right: 5px solid #9e9e9e;
 }
 .circular i {
   float: left;
   font-size: 18px;
   /* background-color: #211e63; */
   color: white;
   padding: 16px;
   border-radius: 10px;
   height: 20px;
   width: 20px;
   box-shadow: 0px 0px 5px 2px grey;
   text-align: center;
   border: 1px solid white;
   background: linear-gradient(0deg, rgb(31 164 183) 0%, rgb(135 177 14) 100%);
 }
 .contact-add i {
   float: none;
   background-color: transparent;
   color: #009688;
   padding: 0px;
   box-shadow: none;
   text-align: center;
   float: left;
   margin-top: 5px;
 }
 .contact-add p {
   display: inline;
   text-align: left;
 }
 .circular h5 {
   float: left;
   margin: 0px;
   font-size: 14px;
   margin-top: 17px;
   margin-left: 15px;
   font-weight: 400;
   color: #404040;
 }
 .contact-call {
   position: absolute;
   width: 70%;
 }
 /* .contact-whatsapp {
   position: absolute;
     right: 45px;
     width: 15%;
     height: 100%;
 }
 .contact-address-card {
   position: absolute;
     right: 10px;
     width: 15%;
     height: 100%;
 } */
 
 .contact-add {
   width: 27%;
   height: auto;
   position: absolute;
   right: 0px;
   top: 5px;
   text-align: center;
   font-size: 14px;
   text-decoration: none;
   color: green;
   padding: 5px;
 }
 .fa-mobile {
   font-size: 26px !important;
 }
 .circular i.fa-whatsapp.fa-wa {
   font-size: 24px;
   background-color: transparent;
   color: #50c55e;
   box-shadow: none;
   margin-top: -3px;
   margin-left: 0px;
   border: none;
 }
 .circular i.fa-address-card {
   font-size: 24px;
   background-color: transparent;
   box-shadow: none;
   margin-top: -3px;
   margin-left: 0px;
   color: #607D8B;
   border: none;
 }
 .address h5 {
   width: 75%;
   margin: 0;
   position: absolute;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 70px;
   margin-top: 0px;
 }
 .address,
 .address-top {
   height: 80px;
 }
 .address i,
 .address-top i {
   margin-top: 13px;
 }
 .address-top h5 {
   margin: 0;
   position: absolute;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 70px;
   margin-top: 0px;
 }
 #companyWebsite h5 {
   left: 53px;
   position: absolute;
 }
 canvas {
   width: 99% !important;
 }
 section h3 {
   text-align: center;
   letter-spacing: 1px;
   color: #e21821;
 }
 .top-social {
   text-align: center;
   margin: 20px 0px;
 }
 .social {
   padding: 10px;
   margin-bottom: 3px;
   background: linear-gradient(0deg, rgb(31 164 183) 0%, rgb(135 177 14) 100%);
   display: inline-block;
   border-radius: 10px;
   text-align: center;
   /* background-image: linear-gradient(#211e63, #211e63); */
   margin: 5px;
   border: 1px solid white;
   box-shadow: 0px 0px 5px 2px grey;
   min-width: 20px;
 }
 .social i {
   font-size: 16px;
   color: #ffffff;
 }
 .top-social .contact-whatsapp {
   background-color: #64b161;
   padding: 10px 10px;
   border-radius: 5px;
   color: white;
   text-decoration: none;
   box-shadow: 0px 0px 15px 5px #cacaca;
   background-image: linear-gradient(#64b161, #529a4f, #64b161);
 }
 .top-social .contact-whatsapp i,
 .top-social .contact-save-card i {
   margin: 0px 5px;
   /* font-weight: bold; */
 }
 .top-social .contact-save-card {
   display: inline-block;
   background-color: #2196F3;
   padding: 10px 10px;
   border-radius: 5px;
   margin: 10px;
   color: white;
   text-decoration: none;
   box-shadow: 0px 0px 15px 5px #cacaca;
   background-image: linear-gradient(#2196F3, #2980c5, #2196F3);
 }
 /* =================== 
    Services Section 
  =================== */
  .services img {
  height: 220px;
  margin-bottom: 20px;
 }
 .services {
   margin: 15px 20px;
   border-radius: 5px;
   padding: 5px;
   text-align: center;
 }
 .services h3 {
   text-align: center;
 }
 .services p,
 .services div {
   margin: 10px 15px;
 }
 .services ul {
   list-style: none;
 }
 .services ul li {
   font-size: 15px;
   font-weight: 400;
   color: #404040;
   margin: 5px 0px;
 }
 .services i {
   font-size: 18px;
   margin: 3px;
   margin-right: 10px;
   list-style-position: outside;
   margin-left: -29px;
 }
 /* =================== 
    Video Section 
  =================== */
 
 .video-gallery {
   text-align: center;
 }
 /* =================== 
    Footer Section 
  =================== */
 
 footer p {
   padding: 15px;
   text-align: center;
   background: #080808;
   color: white;
   margin-top: 30px;
 }
 footer a {
   color: white;
   text-decoration: none;
 }
 /* =================== 
    Gallery Section 
  =================== */
 
 .slideshow-container {
   max-width: 1000px;
   position: relative;
   margin: auto;
 }
 #photoGallery.slideshow-container {
   background: transparent;
 }
 #photoGallery {
   text-align: center;
 }
 #photoGallery img {
  width: 100%;
    max-width: 150px;
    margin: 10px;
}
 .mySlides {
   display: none;
 }
 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: #211e63;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
 }
 .text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
 }
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
 .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 .active,
 .dot:hover {
   background-color: #717171;
 }
 .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
 }
 @-webkit-keyframes fade {
   from {
     opacity: .4
   }
   to {
     opacity: 1
   }
 }
 @keyframes fade {
   from {
     opacity: .4
   }
   to {
     opacity: 1
   }
 }
 /* =================== 
    Documents Section 
  =================== */
 
 .section-docs {
   padding: 20px 10px;
   text-align: center;
   box-shadow: 0px 20px 15px -10px #cacaca;
   border-radius: 0% 0% 50% 50%/4%;
 }
 .section-docs a {
   margin: 10px;
   line-height: 30px;
   color: #3246b5;
   text-decoration: none;
   padding: 10px 20px;
   background: #3F51B5;
   border-radius: 5px;
   color: white;
 }
 /* =================== 
    Testimonials Section 
  =================== */
 
 .testimonials-section {
   box-shadow: 0px 20px 15px -10px #cacaca;
   border-radius: 0% 0% 50% 50%/4%;
 }
 .slideshow-container {
   position: relative;
 }
 .mySlidesTestimonials {
   display: none;
   padding: 20px 50px;
   text-align: center;
   padding-top: 40px;
 }
 q {
   font-style: italic;
 }
 .author {
   color: #3f51b5;
   font-weight: bold;
 }
 /* =================== 
    Profile Section 
  =================== */
 
 .section-profile {
   text-align: center;
 }
 .section-profile a {
   display: inline-block;
   text-decoration: none;
   margin: 10px;
   height: 200px;
   width: 150px;
   overflow: auto;
 }
 .section-profile img {
   height: 100px;
   border-radius: 10px;
   border: 1px solid #fff;
   margin: 10px 0px;
   box-shadow: 0px 0px 10px 1px #00000038;
 }
 .section-profile h5 {
   font-size: 15px;
   color: #211e63;
   margin: 0px;
 }
 .section-profile h6 {
   font-size: 14px;
   color: #777;
   margin: 0px;
 }
 /* =================== 
    Contact Section 
  =================== */
 
 #contactForm h2,
 #contactForm h2 a {
   color: #FFC107;
 }
 #contactForm h4 {
   color: #f1f1f1;
   margin-bottom: 50px;
 }
 .register-form {
   background: white;
   padding-top: 20px;
   padding-bottom: 20px;
 }
 .register-form h4 {
   color: #005dbf;
   font-weight: bold;
   font-size: 22px;
 }
 .register-form p {
   margin-left: 20px;
 }
 .register-form input {
   width: 80%;
   border: none;
   border-bottom: 1px solid #c3c3c3;
   margin-bottom: 10px;
   margin-top: 10px;
   margin-left: 10%;
   padding: 10px;
 }
 .register-form button {
   padding: 5px 40px;
   background: linear-gradient(0deg, rgb(0 143 197) 0%, rgb(0 85 117) 100%);
   border: none;
   border-radius: 5px;
   color: white;
   margin-top: 20px;
   font-size: 15px;
   height: 40px;
 }
 .register-form button:focus {
   outline: none;
 }
 #sendmessage {
   color: #00a976;
   border: 1px solid #00a976;
   display: none;
   text-align: center;
   padding: 15px;
   font-weight: 600;
   margin-bottom: 15px;
 }
 #errormessage {
   color: #bd0000;
   border: 1px solid #bd0000;
   display: none;
   text-align: center;
   padding: 15px;
   font-weight: 600;
   margin-bottom: 15px;
 }
 #sendmessage.show,
 #errormessage.show,
 .form .show {
   display: block;
 }
 .section-contact {
   background: #e4e4e4;
   margin: 15px 20px;
   border-radius: 5px;
   padding: 5px;
 }
 .text-center {
   text-align: center;
 }
 /* =================== 
    Modal Section 
  =================== */
 
 .validation {
   width: 100%;
   margin-top: -5px;
   margin-left: 10%;
   text-align: left;
   font-size: 14px;
   color: red;
 }
 .modal {
   display: none;
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
   z-index: 1;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   /* Full width */
   height: 100%;
   /* Full height */
   overflow: auto;
   /* Enable scroll if needed */
   background-color: rgb(0, 0, 0);
   /* Fallback color */
   background-color: rgba(0, 0, 0, 0.4);
   /* Black w/ opacity */
 }
 .modal-content.whatsapp-modal {
   background-color: #fefefe;
   margin: 15% auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
   border-radius: 10px;
   height: auto;
   text-align: center;
 }
 .image-modal {
  /* margin: 15% auto; */
  padding: 20px;
  width: 88%;
  border-radius: 10px;
  height: auto;
  text-align: center;
 }
 .modal-content span {
   margin-left: 10px;
 }
 .modal-content .text-center {
   text-align: center;
   font-size: 24px;
 }
 .close {
   color: #aaa;
   float: right;
   font-size: 38px;
   font-weight: bold;
   top: -20px;
   position: relative;
   right: -10px;
 }
 #imageModal .modal-content span {
  color: #fff;
  float: right;
  font-size: 88px;
  font-weight: bold;
  top: 10px;
  position: relative;
  right: 20px;
 }
 .modal-content input {
   margin-left: 0px;
   padding: 10px;
   border-radius: 5px;
   border: 1px solid gray;
   font-size: 16px;
   width: 80%;
   margin-bottom: 20px;
 }
 .modal-content button {
   padding: 10px;
   border-radius: 5px;
   margin-left: 10px;
   background-color: #64b161;
   border: none;
   width: auto;
   color: white;
   font-size: 16px;
   background-image: linear-gradient(#64b161, #529a4f, #64b161);
 }
 .modal-content .validation {
   margin-left: 0px;
   margin-bottom: 10px;
   margin-top: -10px;
 }
 .close:hover,
 .close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
   outline: 0;
 }
 /* =================== 
    Install Section 
  =================== */
 
 .section-install {
   margin: 50px 10px;
   text-align: center;
 }
 .section-install a {
   padding: 20px 30px;
   background: #009688;
   text-decoration: none;
   color: white;
   border-radius: 10px;
 }
 .section-install,
 .section-share {
   margin: 20px 10px;
   text-align: center;
   margin-top: 30px;
 }
 .section-install a,
 .section-share a {
   padding: 20px;
   background-image: linear-gradient(#2196F3, #2980c5, #2196F3);
   text-decoration: none;
   color: white;
   border-radius: 10px;
   display: inline-block;
   box-shadow: 0px 0px 15px 5px #cacaca;
 }
 .section-install span,
 .section-share span {
   margin-left: 10px;
   font-weight: bold;
 }
 .section-install img {
   float: left;
 }
 .section-install p {
   margin-left: 10px;
   font-weight: bold;
   float: left;
 }
 /* =================== 
    Share Section 
  =================== */
 
 .section-share a {
   background: #64b161;
   text-transform: uppercase;
   box-shadow: 0px 0px 15px 5px #cacaca;
   background-image: linear-gradient(#64b161, #529a4f, #64b161);
 }
 .section-share {
   margin: 20px 10px;
   text-align: center;
   margin-top: 45px;
   margin-bottom: 45px;
 }
 /* =================== 
    For mobile app iframe 
  =================== */
 
 .iframe-app {
   font-size: 16px;
 }
 .iframe-app h5 {
   font-size: 16px;
 }
 .iframe-app #wrapper h2 {
   font-size: 28px;
 }
 .iframe-app #wrapper h4 {
   font-size: 18px;
 }
 .iframe-app .social {
   /* padding: 15px; */
 }
 .iframe-app .social i {
   font-size: 18px;
 }
 .iframe-app .contact-add p {
   font-size: 15px;
 }
 .iframe-app .address-top {
   height: 90px;
 }
 .iframe-app .circular i {
   font-size: 18px;
   padding: 15px;
   line-height: 23px;
 }
 .iframe-app .services h3 {
   font-size: 20px;
 }
 .iframe-app .services i {
   font-size: 20px;
 }
 .iframe-app .services ul li {
   font-size: 16px;
 }
 .iframe-app .mySlidesTestimonials {
   font-size: 16px;
 }
 .iframe-app .section-docs a {
   font-size: 16px;
 }
 .iframe-app .register-form button,
 .iframe-app .register-form input {
   font-size: 16px;
 }
 .iframe-app .form-group input {
   font-size: 16px !important;
 }
 #browserDocs {
   display: block;
   margin-bottom: 20px;
   margin-top: 40px;
 }
 #iframeDocs {
   display: none;
 }
 .iframe-app #browserDocs {
   display: none;
 }
 .iframe-app #iframeDocs {
   display: block;
 }
 .iframe-app .contact-address-card .fa-address-card,
 .iframe-app .contact-whatsapp .fa-whatsapp,
 .iframe-app .contact-save-card .fa-download {
   font-size: 18px !important;
   margin-top: 0px !important;
 }
 /* hide website if not secure */
 
 /* .iframe-app #companyWebsite {
   display: none;
 } */
 
 /* =================== 
    Responsive 
  =================== */
 
 @media screen and (min-width: 1024px) {
   html,
   body {
     width: 450px;
     margin: auto;
   }
   #wrapper {
     height: 40% !important;
     /* for desktop top banner height */
   }
 }
 /* Landscape */
 
 @media screen and (max-width: 360px) {
   /* video {
     width: 300px;
   } */
 }
 @media screen and (orientation: landscape) {
   #wrapper {
     height: 80%;
   }
 }
 @media (max-width: 767px) {
   iframe {
     width: auto;
     height: auto;
   }
 }