* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

body {
      font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  overflow-x: hidden;
  background-color: #ffffff;
  color: #007db3;
}
 
 

html, body, .wrapper {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #2fa6dc;
  font-weight: normal;
  line-height: 1.2;
    font-family: 'Poppins', sans-serif;
  letter-spacing: 0;
  margin: 0;
}

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

h1 {
  font-size: 40px;
}

h2 {
    font-size: 36px;
    font-weight: bold;
}

h3 {
  font-size: 27px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 14px;
}

img {
  border: none;
  outline: none;
  max-width: 100%;
}

label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 5px;
  max-width: 100%;
}

a, .btn, button {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  outline: medium none;
 
}

a img, iframe {
  border: none;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #eee;
}

pre {
  display: block;
  margin: 0 0 30px;
  padding: 9.5px;
  word-wrap: break-word;
  word-break: break-all;
  color: #333;
  border: 1px solid #ededed;
  border-radius: inherit;
  background-color: #f9f9f9;
  font-size: 13px;
  line-height: 1.42857143;
}

input:focus, textarea:focus, 
 select:focus {
  outline: none;
  box-shadow: inherit;
}

ul {
  margin: 0;
  list-style-type: none;
}

a, a:active, a:focus, a:hover {
  outline: none;
  text-decoration: none;
  color: #232323;
}

.dark-layout a, 
.dark-layout a:active, 
.dark-layout a:focus, 
.dark-layout a:hover {
  color: #ffffff;
}

a:hover {
  color: #22a0da;
}

a {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  text-decoration: none;
 
 
  font-weight: 700;
}

b, strong {
  font-weight: 900;
}

.btn.active, .btn:active {
  background-image: inherit !important;
}

.btn.focus, 
 .btn:active:focus, 
 .btn:active:hover, 
 .btn:focus, 
 .btn:hover {
  outline: 0;
}

.btn.circle {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.btn.active, .btn:active {
  outline: 0;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

 

/* Button Animaton Border Light */
.btn-animate {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
}

.btn-animate {
  min-width: 14rem;
  height: auto;
}

.btn-animate .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3.5rem;
  height: 3.5rem;
  background:#1c2554;
  border-radius: 2rem;
}

.btn-animate .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

.btn-animate .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 15px;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

.btn-animate .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

.btn-animate .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 0;
    margin: 0 0 0 70px;
    color: #232323;
    line-height: 1.8;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
}

.dark-layout .btn-animate .button-text {
    color: #ffffff;
}

.btn-animate:hover .circle {
  width: 100%;
}

.btn-animate:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}

.btn-animate:hover .button-text {
  color: #fff;
}

a.btn-simple {
    text-transform: uppercase;
    color: #666666;
}

a.btn-simple i {
    position: relative;
    top: 2px;
}

a.btn-simple:hover {
    color: #f35a38;
}

.video-btn {
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 10px;
}

.text-center .video-btn {
  margin-left: 0;
}

 

 
.btn {
 
 
  font-size: 14px;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  letter-spacing: 1px;
 
  border-radius: 3px;
}

 
 

header {
  position: relative;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
  position: relative;
  z-index: 1;
  margin-left: 3px;
}
img.logo {
    width: 250px;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
  width: 100%;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a:hover::after {
  width: 0;
}

.attr-nav .social.right li {
  margin-left: 20px;
}

.attr-nav .social li a {
  font-size: 16px;
}

/* Navbar */
nav.bootsnav.navbar-default.info-topbar .navbar-header {
  display: none;
}

nav.bootsnav.navbar-default.info-topbar ul li a {
  margin-right: 30px;
  padding: 35px 0;
}

nav.bootsnav.navbar-default.info-topbar.active-full ul li a {
  margin-right: 0;
  padding: 35px 20px;
}

 a.btn-theme:hover {
    background: #22a0da !IMPORTANT;
}
  a.btn-theme {
      background: #1c2554;
 
    display: inline-block;
    font-weight: 500;
    padding:15px 30px 13px 30px !important;
  
    border-radius: 6px;
    text-transform: capitalize;
 
    position: relative;
    font-size: 20px;
	    color: #fff !important;
		margin-left: 70px;
}
 
.btns .btn-theme {
    background: #1c2554;
    font-weight: 500;
    padding: 12px 30px 12px 30px !important;
    border-radius: 6px;
    position: relative;
    font-size: 14px;
    color: #fff !important;
    margin: 0;
    text-transform: uppercase;
}
 
   .wpo-hero-subtitle p {
    font-size: 17px;
    font-weight: 600;
    color: #483939;
    line-height: 28px;
    padding: 6px 0px 5px 0px;
   }
 
.banner_video img {
    border-radius: 10px;
	border: 4px solid #b7bec1;
}
.wpo-hero-title h1 {
font-size: 38px;
    font-weight: bold;
    line-height: 46px;
    text-transform: uppercase;
    color: #22a0da;
    text-shadow: 1px -4px 4px rgb(145 171 127 / 0%);
}
.wpo-hero-title h4 span {
    color: #22a0da;
}
.wpo-hero-title h4 {
       font-weight: 500;
    text-transform: capitalize;
    font-size: 20px;
    font-style: italic;
    color: #1f9fd9;
}
.modal-dialog {
    max-width: 70%;
    margin: 1.75rem auto;
}

button.close span {
    font-weight: 400;
    font-size: 60px;
	color:#fff;
}
.video-btn i {
color: #fff;
  height: 90px;
  width: 90px;
    line-height: 90px;
  background: #1c2554;
  cursor: pointer;
  font-size: 23px;
  animation: ripple_shadow 2s linear infinite;
 
  border-radius: 50%;
}
button#click_btn {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}
@keyframes ripple_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    }
    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    }
}
 
 
.banner-main {
    background: #fff;
    padding: 80px 0px 80px 0;
}
.wpo-hero-section-text {
    padding: 70px 0;
}
.wpo-hero-title span {
    color: #79c143;
}
.modal-content {
    background: transparent !IMPORTANT;
    border: 0;
}
.services-list-are {
      position: relative;
    z-index: 1;
 
    background:#1c2654;
    padding: 90px 50px;
     
}
.item p {
  color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 30px;
}
.services-list-are:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 100%;
    background: url(assets/img/map.svg);
    background-position: bottom;
       z-index: -1;
    background-size: cover;
	opacity:0.1;
}
.item {
    padding: 0 25px;
    border-right: 1px solid #e7e7e7;
}

 
.whyus-area .content li {
         font-size: 17px;
    font-weight: 600;
    line-height: 38px;
    padding-left: 32px;
    position: relative;
    color: #1c2654;
}
.whyus-area {
    padding: 80px 0;
}
.align-center {
    align-items: center;
}
.thumb img {
    border-radius: 7px;
}
.content i {
    position: absolute;
    left: 0;
    top: 11px;
    font-size: 22px;
    color: #1c2654;
}
  .shape-fixed {
      position: absolute;
    right: -190px;
    top: -60px;
    height: 100%;
    width: 100%;
    opacity: 0.3;
    z-index: 9;
    max-width: 210px;
}
.shape-fixed img {
    animation: rotate-animation 10s infinite linear;
}
.heading-side p {
  font-size: 17px;
    font-weight: 600;
    line-height: 32px;
}
.limit-area {
   padding: 80px 0px 80px 0px;
    z-index: 1;
    background-image: url(assets/img/limitation.png);
    background-size: cover;
    position: relative;
   
}
@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
 
footer {
         background: #fbfbfb;
    
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.f-items {
    padding: 80px 0px;
}
.social li {
    display: inline-block;
    margin: 0px 3px;
}
.social a:hover {
    opacity: 0.8;
}
h4.widget-title {
  color: #1c2654;
    font-weight: 600;
    letter-spacing: 1px;
}
.f-item.about img {
    margin-top: -15px;
	    max-width: 65%;
}
.social a {
    color: #fff;
    font-weight: normal;
    width: 40px;
    height: 40px;
 line-height: 40px;
    display: block;
    text-align: center;
    border-radius: 50px;
}
 
li.facebook a {
    background: #4064ac;
}

li.twitter a {
    background: #00ACEE;
}

li.instagram a {
    background: #8a3ab9;
}

li.youtube a {
    background: #FF0000;
}
footer a {
    color: #1c2654;
    line-height: 38px;
    letter-spacing: 1px;
    font-weight: 500;
}
.f-item.contact li {
    color: #fff;
    margin-bottom:30px;
}
footer .item {
    padding: 0px 30px;
    border-right: 0;
}
.f-item.contact p {margin-bottom: 0px; 
   font-weight: bold;}
   
.address span {
    font-size: 21px;
    font-weight: 400;
}
.footer-bottom {
 
    background: #22a0da;
    padding: 15px 0;
}
.footer-bottom ul li:last-child {
    border: 0;
}
.footer-bottom a:hover {
    color:#1c2654;
}
.footer-bottom p {
      margin: 0;
    color: #fff;
    font-weight: 100;
    font-size: 15px;
}
.footer-bottom ul li {
   display: inline-block;
    margin-right: 6px;
    border-right: 1px solid #fff;
    padding-right: 10px;
}

.footer-bottom a {
    color: #fff;
     font-weight: 100;
font-size: 15px;
}
.limit-area img {
    border-radius: 7px;
}
.content p {
   font-size: 17px;
    font-weight: normal;
    line-height: 32px;
    position: relative;
    color: #1c2654
}

.limit-area:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
       background: #1c2654b8;
}
.heading-side h2, .heading-side p{
    color: #fff;
    font-weight: normal;
}
.support-wrapper {
    padding: 80px 100px;
    border-radius: 15px;
    background:#1f9fd9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.support-text h2 {
    color: #fff;
    font-size: 30px;
}
 .support-wrapper span.button-text {
    color: #fff;    font-family: 'Montserrat', sans-serif;
}
.support-section {
    margin-bottom: 50px;
}

.spintax-area {
    padding: 80px 0px 80px 0px;
 
	margin-bottom:50px;
}
 
 .tracking-area ul li {
    font-size: 17px;
    font-weight: 600;
    line-height: 38px;
    padding-left: 32px;
    position: relative;
    color: #1c2654;
}
/* ============================================================== 
     # Work Process
=================================================================== */
.process-list-items .icon {
    display: inline-block;
    position: relative;
    z-index: 1;
    height: 80px;
    line-height: 80px;
    width: 80px;
    background:#22a0da;
    box-shadow: 0 0 1.5625rem 0 rgb(54 186 254 / 10%);
    text-align: center;
    border-radius: 50%;
    margin-bottom: 30px;
}
.icon span {
    color: #fff;
    font-family: 'Montserrat';
    font-size: 30px;
}
.process-list-items .icon i {
    display: inline-block;
    font-size: 50px;
    color: #232323;
}

 

.process-list-items h4 {
    font-weight: 700;
}

.process-list-items p {
    margin: 0;
    padding: 0 10%;
}

.process-list-items .single-item {
    margin-bottom: 30px;
}

.process-list-items .item {
    position: relative;
    z-index: 1;
}

 

.process-list-items .single-item:first-child .item::after, 
.process-list-items .single-item .item:hover::after {
    opacity: 0.3;
    transform: rotate(-53deg);
}
.our-process-area {
    background: #fff9f9;
	padding:80px 0px;
}
.item-text {
    text-align: center;
}
.support-content h1 {
    color: #fff;
}
.item-text p {
        font-size: 20px;
    color: #342d2d;
    line-height: 35px;
    position: relative;
    font-weight: 600;
}
a.btn-spin {
    background: linear-gradient(to left, #22a0da, #1c2654);
    color: #ffffff !important;
    
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    text-transform: uppercase;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    letter-spacing: 1px;
    border-radius: 3px;
    padding: 15px 30px;
    margin: auto;
    display: table;
}
a.btn-spin:hover {
    background: #6fcaf1;
}

 /*------------------- Price-page----------- */

.breadcrumb-area {
   padding: 70px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
   background: #1c2554;
}
.bg-cover {
    background-position: center center;
    background-size: cover;
}

.breadcrumb-area .breadcrumb {
    background: transparent none repeat scroll 0 0;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
} 
.price-content h1 {
    color: #fff;
    margin: 0;
    font-size: 30px;
    line-height: 42px;
}
.breadcrumb-area .breadcrumb a, .breadcrumb-area .breadcrumb li {
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 14px;
}
.breadcrumb-area .breadcrumb li {
    padding: 0 20px;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.breadcrumb-area .breadcrumb li::after {
    content: "";
    height: 2px;
    left: -10px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    background: #ffffff;
    width: 15px;
}
.breadcrumb-area .breadcrumb li:first-child::after {
  display: none;
}
.shadow.dark::after {
    background: #00000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
/* ============================================================== 
     # Pricing Table 
=================================================================== */

.pricing-area .pricing {
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
}
.pricing-header p {
    margin: 0;
    padding: 0;
    margin-top: -10px;
    font-size: 18px;
    font-weight: 100;
    color: #1f9fd9;
}
}
.pricing-area {
    padding: 50px 0;
}
.pricing-item {
    box-shadow: 0 0 10px #cccccc;
    border-radius: 8px;
    background: #ffffff;
    padding: 50px 15px;
	border-bottom: 3px solid #000;
}

.pricing .support-text h2 {
      
    font-size: 30px;
    text-transform: capitalize;
    line-height: 35px;
    margin: 0;
}
.pricing-area {
    margin: 60px 0;
}
.pricing-header h2{
          font-weight: bold;
    text-transform: uppercase;
    font-size: 30px;
    margin-bottom: 25px;
    font-family: 'Montserrat';
	text-transform:uppercase;
}
.pricing-header h4{
          font-weight: bold;
    text-transform: uppercase;
    font-size: 30px;
    margin-bottom: 25px;
    font-family: 'Montserrat';
	text-transform:uppercase;
}
.pricing-header i {
    display: inline-block;
    font-size: 45px;
    margin-bottom: 20px;
    display: inline-block;
    color: #ffffff;
    height: 100px;
    width: 100px;
    line-height: 100px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.pricing-header i::after {
    position: absolute;
    left: -5px;
    top: -5px;
    content: "";
    height: 100%;
    width: 100%;
    background: url('https://callsystem.net/public/frontend-assets/assets/img/circle-shape.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
}
 

 

.pricing-header {
    padding-bottom: 30px;
    text-align: center;
}

.pricing-item.active .pricing-header {
  border-color: rgba(255, 255, 255, 0.3);
}

.pricing-area .single-item ul {
    display: inline-block;
    text-align: left;
}

.pricing-item .footer {
  margin-top: 20px;
}

.pricing-item li {
    line-height: 40px;
    text-transform: capitalize;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: #1c2654;
    margin-bottom: 20px;
    border-bottom: 1px solid #e3e1e1;
}
.footer p {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #1f9fd9;
}
.pricing-footer .btn {
    margin: 0;
}
.pricing-area .pricing-item li i {
      margin-left: 25px;
    color: #1c2554;
    font-size: 16px;
}

 

.pricing-area .pricing-footer {
      margin-top: 30px;
    text-align: center;
}

.pricing-area .pricing-header img {
    height: 100px;
    margin-top: 30px;
}

 
 

.blue .pricing-footer a.btn-dark.effect:hover {
  background: #4628ba;
  color: #ffffff !important;
  border-color: #4628ba;
}


/*-------------------End Price-page----------- */

 
/*-------------------Faq----------- */

.faq-text h2 {
    font-size: 21px;
    letter-spacing: .3px;
}
.faq-text p {
    font-size: 16px;
    color: #000;
    font-weight: 600;
}

 .faq {
    padding: 50px 0;
}
.faq-text {
    margin-bottom: 20px;
	    width: 100%;
}
.faq-text ul li {
        font-size: 16px;
    color: #000;
    font-weight: 600;
}
/*-------------------End Faq----------- */

.contact-area .contact-items .form-items input, .contact-area .contact-items .form-items textarea, .contact-area .contact-items .form-items input:focus, .contact-area .contact-items .form-items textarea:focus {
   border: none;
    background: transparent;
    border-radius: inherit;
    border-bottom: 1px solid #6fcaf1;
    padding: 0;
    box-shadow: inherit;
    margin-bottom: 40px;
    font-size: 15px;
    font-weight: 600;
}
.contact-items {
    box-shadow: 0 0 10px #cccccc;
    padding: 50px;
}
.contact-area {
    padding: 50px 0;
}
button#submitsupport {
    background:linear-gradient(to left, #1c2554, #1c2554);
    display: inline-block;
    font-weight: 500;
    padding: 15px 40px;
    border-radius: 6px;
    text-transform: capitalize;
    position: relative;
    font-size: 20px;
    color: #fff;
    border: 0;
}
.form-items h2 {
    font-size: 28px;
    line-height: 35px;
    margin-bottom: 40px;
}

.pricing-header h2 {
    font-size: 21px;
    margin: 0;
    color: #6fcaf1;
    margin-bottom: -20px;
}

 
.content h2 {
    position: relative;
    margin-bottom: 40px;
}

.content h2:after {
    position: absolute;
    width: 119px;
    height: 3px;
    content: '';
    background: #2fa6dc;
    left: 0;
    bottom: -15px;
}
.f-item.about p {
    color: #1c2654;
    padding: 10px 0;
}
.tracking-area {
    padding-bottom: 50px;
}
.faq h4 {
    background: #ebe8e8;
    padding: 30px 30px;
    color: #2a2d2e;
    font-size: 19px;
    line-height: 29px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.pricing-item h2 {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 25px;
    font-family: 'Montserrat';
}