/**
* Template Name: Arsha
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Jost",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #37517e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #66ccff; /* --accent-color: #47b2e4; */ /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --alt-background-color: #F5F6F8; /*Contrast to White background */
  --shade-color: #e9f0fc;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #47b2e4; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #47b2e4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --hero-background-color: #37517e;
  --hero-color: #ffffff;
  --note-background-color: #ffd8cd;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  /* background-color: blue; */
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #3d4d6a;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 48px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 20px;
  border-radius: 50px;
  transition: 0.3s;
  text-align: center;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.header #btn-login {
  background-color: transparent;
  border: 1px white solid;
  min-width: 89px;
}

@media (max-width: 1199px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }

  .header #btn-login {
    background-color: var(--accent-color);
    margin: 15px;
    /* border: 1px white solid; */
    min-width: 89px;
    font-size: 17px;
    justify-content: center;

    /* padding: 8px; */
  }

}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: #ffffff;
  --nav-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: rgba(40, 58, 90, 0.9);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

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

  .navmenu li {
    position: relative;
  }

  .navmenu li .nav-header {
    padding: 10px 0 0px 20px; 
    font-size: 18px;
    color: var(--accent-color);
    font-weight: 600;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

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

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

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

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

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

  .navmenu .megamenu {
    position: static;
  }

  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .megamenu ul li {
    flex: 1;
  }

  .navmenu .megamenu ul li a,
  .navmenu .megamenu ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .megamenu:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dd-box-shadow {
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }
}




/* .navmenu .btn-login,
.navmenu .btn-login:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  border-radius: 50px;
  transition: 0.3s;
  min-width: 87px;
}

.navmenu .btn-login:hover,
.navmenu .btn-login:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
} */



/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: #C4CBD9;
  background-color: var(--hero-background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 95%);
  display: flex;
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

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

.footer .footer-top {
  padding-top: 50px;
}

.footer-top .footer-about .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  font-size: 16px;
  /* color: color-mix(in srgb, var(--default-color), transparent 20%); */
  /* color: #C4CBD9; */
  color: var(--accent-color);
  margin: 10px 10px 0 0;
  transition: 0.3s;
}

.footer-top .footer-about .social-links a:hover {
  color: white;
  border-color: white;
}

.footer-top .footer-about img {
  height: 50px;
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
  color: var(--accent-color);
}

.footer .footer-links {
  margin-bottom: 30px;
}


.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* color: white; */
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  /* color: color-mix(in srgb, var(--default-color), transparent 20%); */
  line-height: 1;
  color: #C4CBD9;
}

.footer .footer-links ul a:hover {
  color: white;
}

.footer .footer-about a {
  color: white;
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
  color: #C4CBD9;

}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  #footer {
    text-align: center;
  }

  #footer .footer-top .footer-links ul li {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

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

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

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

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  /* margin-top: 120px; */
  padding: 130px 0 40px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

.white-bg {
  background-color: white; 
}

.alt-bg {
  /* background-color: var(--alt-background-color); */
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.accent-bg {
  background-color: var(--accent-color);
}

.alt-accent-bg {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.note-bg {
  background-color: var(--note-background-color);
  padding: 10px 15px;
  border-radius: 5px;
}

.box-shadow {
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.full-xy {
  height: 100% !important;
  width: 100% !important;
}


/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /* text-transform: uppercase; */
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  /* --background-color: var(--hero-background-color); */
  --default-color: var(--hero-color);
  --heading-color: var(--hero-color);
  --contrast-color: var(--hero-color);
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0 20px 0;
  display: flex;
  align-items: center;
  background-color: var(--hero-background-color);
  /* background-image: url("hero-3.jpg"); */

}

.hero-bg {
  background: url("../img/voip-phone-system.jpg");
  /* background: url("../img/test/hero-1.jpg"); */
  /* background: url("../img/test/hero-1.jpg") center top no-repeat cover; */
  background-size: cover;
  background-origin: border-box;
  background-position: center;
}

.ai-voice-bg {
  background: url("../img/partner-program.jpg");
  background-size: cover;
  background-position: top;
}

.broadband-bg {
  background: url("../img/unlimited-broadband.jpg");
  background-size: cover;
  background-position: left;
}

.cloud-pbx-bg {
  background: url("../img/cloud-pbx.jpg");
  background-size: cover;
  background-position: bottom;
}

.conference-bg {
  background: url("../img/web-conference.jpg");
  background-size: cover;
  background-position: center;
}

.sip-trunk-bg {
  background: url("../img/sip-trunk.jpg");
  background-size: cover;
  background-position: center;
}

.phone-numbers-bg {
  background: url("../img/phone-numbers.jpg");
  background-size: cover;
  background-position: left;
  /* opacity: 0.9; */
}

.ms-teams-bg {
  background: url("../img/microsoft-teams-calling.jpg");
  background-size: cover;
  /* opacity: 0.9; */
}

.partner-bg {
  background: url("../img/voip-phone-system.jpg");
  background-size: cover;
  background-position: center;
  /* opacity: 0.9; */
}


.zoho-bg {
  background: url("../img/zoho-crm.jpg");
  background-size: cover;
  /* opacity: 0.9; */
}

@media (max-width: 640px) {

  .hero-bg {
    /* background: url("../img/voip-phone-system.jpg"); */
    background-size: cover;
    background-position: 40% 0%;
  }
  .ai-voice-bg {
    /* background: url("../img/ai-voice.jpg"); */
    background-size: cover;
    background-position: 75%;
  }

  .cloud-pbx-bg {
    /* background: url("../img/cloud-pbx.jpg"); */
    background-size: cover;
    background-position: 70%;
  }

  .sip-trunk-bg {
    background-size: cover;
    background-position: 79%;
  }

  .phone-numbers-bg {
    /* background: url("../img/phone-numbers.jpg"); */
    background-size: cover;
    background-position: 40%;
    /* opacity: 0.9; */
  }

  .conference-bg {
    /* background: url("../img/web-conference.png"); */
    background-size: cover;
    background-position: 77%;
  }

  .broadband-bg {
    /* background: url("../img/unlimited-broadband.jpg"); */
    background-size: cover;
    background-position: 54%;
  }

  .zoho-bg {
    /* background: url("../img/zoho.jpg"); */
    background-size: cover;
    background-position: right;
    /* opacity: 0.9; */
  }

  .ms-teams-bg {
    /* background: url("../img/ms-teams.jpg"); */
    background-size: cover;
    background-position: right;
    /* opacity: 0.9; */
  }

  .partner-bg {
    /* background: url("../img/partner.jpg"); */
    background-size: cover;
    
    background-position: 40% 0%;
    /* opacity: 0.9; */
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  .sip-trunk-bg {
    background-position: 80%;
  }

  .ai-voice-bg {
    background-position: 20%;
  }

  .cloud-pbx-bg {
    background-position: 70%;
  }

  .phone-numbers-bg {
    background-position: 30%;
  }

  .conference-bg {
    background-position: 75%;
  }

  .broadband-bg {
    background-position: 45%;
  }

  .zoho-bg {
    background-size: cover;
    background-position: right;

  }

  .ms-teams-bg {
    /* background: url("../img/voip-phone-system.jpg"); */
    background-size: cover;
    /* background-position: 30%; */
    background-position: right;
  }

  .partner-bg {
    background: url("../img/voip-phone-system.jpg");
    background-size: cover;
    background-position: 80%;
  }
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero p {
  /* color: color-mix(in srgb, var(--default-color), transparent 30%); */
  margin: 10px 0 0 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

.hero .hero-highlights {
  position: relative;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  padding-left: 1em;
  border-left: 1px inset;
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0 30px 0;
}

.hero .service-highlights {
  padding: 5px;
  /* border: 1px solid white; */
  /* border-radius: 5px; */
}

.btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 50px;
  transition: 0.5s;
  border: none;
}


.btn-get-started:hover,
.btn-get-started:focus {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-plans {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 9px 27px 11px 27px;
  border-radius: 50px;
  transition: 0.5s;
  transition: 0.5s;
  border: 1px solid var(--contrast-color);
  color: var(--contrast-color);
  margin-left: 10px;
}

.hero .btn-plans:hover {
  /* background: var(--accent-color); */
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

/* .hero .hero-img img {
  max-height: 450px;
} */

.hero .btn-watch-video i {
  color: var(--contrast-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {

  /* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */
  background-color: var(--hero-background-color);
  font-size: 20px;
  padding: 12px 0;
  min-height: 25vh;
}

.clients .service-links {
  text-align: center;
  padding: 30px;
}

.clients .service-links a {
  color: white;
}

.clients .service-box {
  border: white 1px solid;
  margin: 10px;
  /* padding: 10px; */
  border-radius: 5px;
  color: white;
  text-align: center;
}

.clients .service-links .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-weight: 600;
}

.clients .btn-watch-video i {
  color: var(--contrast-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  /* margin-right: 2px; */
}

.clients .btn-watch-video:hover {
  color: var(--accent-color);
}

.clients .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}


.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
  padding: 0 10px;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
/* .about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 8px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-color);
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
} */

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us {
  --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  padding: 30px 0;
}

.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.why-us .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: var(--contrast-color);
  overflow: hidden;
}

.why-us .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.why-us .faq-container .faq-item h3 {
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
}

.why-us .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
  font-weight: 600;
}

.why-us .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.why-us .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.why-us .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.why-us .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.why-us .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.why-us .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.why-us .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.why-us .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.why-us .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

.why-us .why-us-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us .why-us-img img {
  max-height: 70%;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.skills .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.skills .content p:last-child {
  margin-bottom: 0;
}

.skills .content ul {
  list-style: none;
  padding: 0;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--default-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--heading-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--heading-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  /* background-color: var(--hero-background-color); */
  --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);

}



.services .service-item {
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  transition: all ease-in-out 0.4s;
  /* background-color: var(--accent-color); */
  /* background-color: rgba(55, 81, 126, .20); */
  /* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */
  background-color: var(--contrast-color);
  height: 100%;
  width: 100%;
}

.services .service-item .icon {
  margin-bottom: 10px;
}

.services .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: 0.3s;
}

.services .service-item h4 i {
  display: none;
}

.services .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.services .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  transform: translateY(-5px);
}

.services .service-item:hover h4 a {
  color: var(--accent-color);
}


@media (max-width: 991px) {

  .services .service-item h4 i {
    color: var(--accent-color);
    font-size: 36px;
    transition: 0.3s;
    padding-right: 10px;
    display: inline;
  }

  .services .service-item {
    padding: 15px 30px 20px 30px;
  }

  .services .service-item .icon {
    display: none;
  }
}

/*--------------------------------------------------------------
# PBX Feature Descriptions
--------------------------------------------------------------*/
.pbx-desc {
  /* background-color: var(--hero-background-color); */
  /* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

}



.pbx-desc .service-item {
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--accent-color), transparent 90%);
  padding: 30px;
  transition: all ease-in-out 0.4s;
  /* background-color: var(--accent-color); */
  /* background-color: rgba(55, 81, 126, .20); */
  /* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */
  background-color: var(--contrast-color);
  height: 100%;
  width: 100%;
}

.pbx-desc .service-item .icon {
  margin-bottom: 10px;
}

.pbx-desc .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: 0.3s;
}

.pbx-desc .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
  /* color: var(--accent-color); */
}

.pbx-desc .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.pbx-desc .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.pbx-desc .service-item:hover {
  transform: translateY(-5px);
}

.pbx-desc .service-item:hover h4 a {
  color: var(--accent-color);
}

@media (max-width: 576px) {
  .pbx-desc .service-item {
    padding: 10px;
    hyphens: auto;
  }

  .pbx-desc .service-item h4 {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Offerings
--------------------------------------------------------------*/

.offerings {
  background-color: var(--alt-background-color);
}

.offerings .icon-box {
  margin-bottom: 10px;
  padding: 25px 25px 5px 25px;
  border-radius: 6px;
  background: #fff;
  width: 100%;
  height: 100%;
}

.offerings .icon-box i {
  float: left;
  color: #5c8eb0;
  font-size: 40px;
  line-height: 0;
}

.offerings .icon-box h4 {
  margin-left: 70px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.offerings .icon-box h4 a {
  /* color: #365870; */
  color: var(--accent-color);
  transition: 0.3s;
}

.offerings .icon-box .icon-box:hover h4 a {
  color: #ff4a17;
}

.offerings .icon-box p {
  margin-left: 70px;
  line-height: 24px;
  font-size: 14px;
}

.offerings .icon-box:hover h4 a {
  color: #ff4a17;
}



/*
  PBX Features
*/

.pbx-features .icon-box {
  margin-left: 10%;
  margin-bottom: 10px;
  padding: 15px 0px 5px 0px;
  border-radius: 6px;
}

.pbx-features .icon-box i {
  float: left;
  color: #5c8eb0;
  font-size: 40px;
  line-height: 0;
}

.pbx-features .icon-box h4 {
  margin-left: 70px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
  color: var(--accent-color);
}

.pbx-features .icon-box h4 a {
  /* color: #365870; */
  color: var(--accent-color);
  transition: 0.3s;
}

.pbx-features .icon-box .icon-box:hover h4 a {
  color: #ff4a17;
}

.pbx-features .icon-box p {
  margin-left: 70px;
  line-height: 24px;
  font-size: 14px;
}

.pbx-features .icon-box:hover h4 a {
  color: #ff4a17;
}

.pbx-features img {
  border-radius: 5px;
}

@media (max-width: 576px) {
  .pbx-features .icon-box {
    margin-left: 10%;
  }
  
}

#phone-numbers-available .icon-box h4 {
  color: var(--accent-color) !important;
}

#teams-features .icon-box h4 {
  color: var(--accent-color) !important;
}

#web-conference-benefits .icon-box h4 {
  color: var(--accent-color) !important;
}



/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about {
  background: #466393;
  background-size: cover;
  padding: 60px 0;
  position: relative;
  color: #fff;
}

.about .content {
  padding: 30px 30px 30px 0;
}

.about .content h3 {
  font-weight: 700;
  font-size: 34px;
  color: #fff;
  margin-bottom: 30px;
}

.about h4 {
  color: #47b2e4;
}

.about .content p {
  margin-bottom: 30px;
}

.about-btn {
  display: inline-block;
  background: #47b2e4;
  padding: 6px 30px 8px 30px;
  color: #fff;
  border-radius: 50px;
  transition: 0.3s;
  
  border: 1px solid var(--accent-color);
}

.about-btn i {
  font-size: 14px;
}

.about-btn:hover {
  background: transparent;
  /* border: 1px solid var(--accent-color); */
}

.about .icon-boxes .icon-box {
  margin-top: 30px;
}

.about .icon-boxes .icon-box i {
  font-size: 40px;
  color: #b6bdfc;
  margin-bottom: 10px;
}

.about .icon-boxes .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.about .icon-boxes .icon-box p {
  font-size: 15px;
}

.about .icon-box a {
  color: #ffffff;
  font-weight: 700;
}

.about .icon-box a:hover {
  color: #ff4a17;
}

@media (max-width: 1200px) {
  .about .content {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .about {
    text-align: center;
  }
}



/*--------------------------------------------------------------
# About Boxes
--------------------------------------------------------------*/
.about-boxes {
  background: url("../img/about-boxes-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 30px 0;
  position: relative;
}

.about-boxes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

.about-boxes .container,
.about-boxes .container-fluid {
  position: relative;
  z-index: 10;
}

.about-boxes .card {
  border-radius: 3px;
  border: 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.about-boxes .card-icon {
  text-align: center;
  margin-top: -32px;
}

.about-boxes .card-icon i {
  font-size: 32px;
  color: #fff;
  width: 64px;
  height: 64px;
  padding-top: 5px;
  text-align: center;
  background-color: #ff4a17;
  border-radius: 4px;
  text-align: center;
  border: 4px solid #fff;
  transition: 0.3s;
  display: inline-block;
}

.about-boxes .card-body {
  padding-top: 12px;
}

.about-boxes .card-title {
  font-weight: 700;
  text-align: center;
}

.about-boxes .card-title a {
  color: #15222b;
}

.about-boxes .card-title a:hover {
  color: #ff4a17;
}

.about-boxes .card-text {
  color: #5e5e5e;
}

.about-boxes .card:hover .card-icon i {
  background: #fff;
  color: #ff4a17;
}

@media (max-width: 1024px) {
  .about-boxes {
    background-attachment: scroll;
  }
}



/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
/* .features {
  background-color: var(--hero-background-color);
} */

.features h5 {
  text-align: center;
  padding-bottom: 20px;
  color: rgba(68, 68, 68, 0.8);

  /* color: #C4CBD9; */
}
.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  border: 0;
  padding: 0 25px 10px 25px;
  color: var(--color-secondary);
  box-shadow: 5px 5px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0s;
  cursor: pointer;
  height: 100%;
  text-align: center;
}

.features .nav-link i {
  font-size: 32px;
  line-height: 0;
}

.features .nav-link h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0 0 0;
}

.features .nav-link:hover {
  color: var(--accent-color);
}

.features .nav-link:hover,
.features .nav-link.active {
  transition: 0.3s;
  background: var(--accent-color);
  color: var(--contrast-color) !important;
  border-color: var(--accent-color);
}

.features .nav-link:hover h4,
.features .nav-link.active h4 {
  color: var(--contrast-color);
}

.features .nav-link:hover i,
.features .nav-link.active i {
  color: var(--contrast-color) !important;
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.features .tab-pane h3 {
  font-weight: 600;
  font-size: 28px;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 24px;
  margin-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

.pbx-features .highlights-container {
  background-color: color-mix(in srgb, var(--accent-color), transparent 87%);
  margin-top: 40px;
  border-bottom: 2px solid var(--accent-color);
}

.pbx-features .feature-highlights {
  /* border-radius: 6px; */
  padding: 30px 20px 20px 20px;
  margin-top: 20px;
}

.pbx-features .feature-highlights h4 {
  line-height: 2.2em;
  transition: 0.3s;
  color: var(--hero-background-color);
  margin-left: 0px;
}

.pbx-features .feature-highlights h4 i {
  padding-right: 10px;
  /* color: #03a6af; */
  color: var(--accent-color);
  
}

.ai-feature-image {
  border: solid 10px color-mix(in srgb, var(--hero-background-color), transparent 80%);
  max-height: 450px;
}
/* .feature-highlights .icon-box {
  text-align: center;
} */

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: var(--hero-background-color);
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 35%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100% !important;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
}

.pricing .pricing-item {
  background-color: var(--contrast-color);
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  border-top: 4px solid var(--background-color);
  padding: 60px 40px;
  height: 100%;
  border-radius: 5px;
}

.pricing .single-pricing-item {
  background-color: var(--contrast-color);
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  border-top: 4px solid var(--background-color);
  padding: 15px 10px;
  height: 100%;
  /* max-width: 400px; */
  border-radius: 5px;
  max-width: 500px;
  margin: auto;
}

.pricing .line-only-item {
  background-color: var(--contrast-color);
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  border-top: 4px solid var(--background-color);
  padding: 20px 15px;
  height: 100%;
  border-radius: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 30%)
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  color: var(--accent-color);
  font-size: 48px;
  font-weight: 400;
  font-family: var(--heading-font);
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span #leave {
  color: red;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
}

.pricing h4 span .calc-value {
  font-size: inherit;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: var(--hero-background-color);
  font-size: 18px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: var(--accent-color);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
  border: 1px solid var(--accent-color);
  margin-right: 10px;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  border-top-color: var(--accent-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  /* margin: 5px 5px; */
}

hr {
  color: var(--accent-color);
}

.calling-bundles thead {
  border-bottom: 1px solid var(--accent-color);
}

.calling-bundles th {
  padding: 10px 15px 10px 15px;
  text-align: center;
}

.calling-bundles td{
  text-align: center;
}

.pricing-item .indent {
  padding-left: 26px;
}

.pricing-item .indent-sm {
  padding-left: 20px;
}

.pricing .terms-sup {
  font-size: 12px;
}

.pricing .gst-incl {
  font-size: 0.7em;
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }

  .pricing .pricing-item {
    padding: 40px 30px;
  }

  .pricing h4 span {
    font-size: 16px;
  }
  
}




/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

.testimonials {
  background-color: var(--hero-background-color);
}

.testimonials h2 {
  color: #F5F6F8;
}

.testimonials h2::before {
  background-color: #F5F6F8;
}
/* 
.testimonials h2::after {
  background-color: white;
} */

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px 30px 0 30px;
  margin: 30px 15px;
  text-align: center;
  min-height: 200px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  background: #F5F6F8;
  /* background: white; */
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: var(--hero-background-color);
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: var(--default-color);
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: white;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #F5F6F8;
  opacity: 1;
  border: 1px solid #3b4ef8;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Faq 2 Section
--------------------------------------------------------------*/
.faq-2 {
  /* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */
}

.faq-2 .faq-container {
  margin-top: 15px;
}

.faq-2 .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  background-color: var(--contrast-color);
  overflow: hidden;
}

.faq-2 .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq-2 .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq-2 .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq-2 .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq-2 .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq-2 .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq-2 .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq-2 .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Cloud PBX Feature summary
--------------------------------------------------------------*/

.cloud-pbx-desc h3 {
  color: var(--hero-background-color);
  /* color: var(--accent-color); */
  font-weight: 600;
  font-size: 18px;
}

.cloud-pbx-desc p {
  color: white;
}

.cloud-pbx-desc .pbx-box {
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all ease-in-out 0.4s;
  background-color: var(--accent-color);
  /* background-color: var(--contrast-color); */
  padding: 15px 10px 5px 10px;
  border-radius: 5px;
  /* height: 100%; */
  margin-bottom: 20px;
  
}
/* padding: 50px 30px; */
/* background-color: var(--accent-color); */
/* background-color: rgba(55, 81, 126, .20); */
/* --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); */

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  border-top: 3px solid var(--accent-color);
  border-bottom: 3px solid var(--accent-color);
  padding: 30px;
  height: 100%;
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  border-top: 3px solid var(--accent-color);
  border-bottom: 3px solid var(--accent-color);
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

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

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

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  /* background-color: color-mix(in srgb, var(--accent-color), transparent 80%); */
  box-shadow: 0px 0 30px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /* border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); */
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list span {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list span.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list span:hover {
  border-color: var(--accent-color);
  cursor: pointer;
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

.partner-model p i {
  /* font-size: 20px; */
  /* margin-right: 8px; */
  color: var(--accent-color);
}

.compare-partners {
  /* margin-top: 80px; */
  background-color: var(--alt-background-color);
}

.compare-partners .table-responsive table thead th {
  color: var(--hero-background-color);
  font-size: 1.2rem;
}
/*--------------------------------------------------------------
# Sign-up form
--------------------------------------------------------------*/

#main {
  background-color: var(--alt-background-color);
}
.signup-container {
  background-color: var(--alt-background-color);
  /* margin-top: 50px; */
  display: flex;
  justify-content: center;

}
.sign-up-page {
  min-height: 100vh;
  padding-top: 10vh;
}

.sign-up-page .signup-form {
  text-align: center;
  padding: 35px 3.5% 40px 3.5%;
  border-radius: 5px;
  background-color: #fff;
  min-width: 325px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.sign-up-page .signup-form h1 {
  margin-bottom: 30px;
}

.sign-up-page .signup-logo img {
  width: 150px;
}

.sign-up-page .free-trial-note {
  padding: 10px;
  margin: 30px 0px;
  border-radius: 5px;
  min-height: 92px;
  /* border: #ffd8cd solid 1px; */
  background-color: var(--note-background-color);
}

.signup-title {
  display: inline;
}

.login-container {
  background-color: white;
  max-width: 500px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 0px;
  border-radius: 5px;
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
}

#horde_login .col-md-4 {
  width: 80%;
}



.home-buttons li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  /* transition: all 0.3s ease-in-out; */
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
}



.home-buttons li:hover,
.filter-active {
  color: #fff !important;
  background: #5846f9;
}

.sign-up-page .signup-form input, select {
  min-width: 100%;
  height: 40px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  opacity: 100%;
  padding-left: 15px;
}

#country {
  background-color: #f2f6f9;
}



.sign-up-page .signup-form .plan-select select {
  width: 100%;
  height: 40px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid lightgrey;
  background-color: #f9f8ff;

}

.sign-up-page .signup-form .plan-select .home-buttons ul {
  margin-bottom: 20px;
  padding: 0px !important;
}


.plan-container p{
  font-size: 12px;
  margin-top: 5px;
}

#email_section {
  margin: 31.5px 0 31px 0;
}

.personal-details{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

#form-summary {
  text-align: left;
}

#form-summary .summary-label {
  font-weight: bold;
  min-width: 110px;
}

#terms_checkbox {
  height: 14px;
  min-width: 20px;
  display: inline !important;
}

#terms_label {
  height: 20px;
  display: inline !important;
  min-width: none;
  font-size: 13px;
  margin-bottom: 100px;
}

.alert-box {
  color: #F55A4E; 
  display: inline-block;
  width: 100%;
  padding-left: 20px;
  text-align: left;
}

.all-buttons {
  /* background-color: grey; */
  width: 100%;
  height: 45px;
  border-radius: 5px;
  display: inline-block;
  align-items: center;
  line-height: 45px
}

.steps {
  padding-top: 20px;
}

.step-1 {
  padding: 0px 0 60px 0;
}

.step-2 .passwords {
  margin: 40.5px 0 0 0;
}

.step-3 {
  margin-bottom: 40px;
}

.step-3 #street_number {
  min-width: 21%;
  width: 21%;
}

.step-3 #street_name {
  display: inline;
  width: 76%;
  min-width: 76%;
  margin-left: 1%;
}

.step-3 #suburb {
  min-width: 50px;
  width: 70%;
}

.step-3 #postcode {
  display: inline;
  min-width: 50px;
  width: 27%;
  margin-left: 1%;
}

.step-3 .agent-code {
  margin: 36.5px 0 30px 0;
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
}

.step-3 .agent-code #agent_code {
  margin: 30px;
  min-width: 50px;
  width: 300px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding-left: 0px;
}

@media (max-width: 474px) {

  .sign-up-page .signup-form input, select {
    padding-left: 10px;
    font-size: 0.9em;
  }

  .sign-up-page .signup-form {
    padding: 4% 4% 4% 4%;
  }
  .step-3 #street_number {
    min-width: 23%;
    width: 23%;
  }
  
  .step-3 #street_name {
    display: inline;
    width: 74%;
    min-width: 74%;
    margin-left: 1%;
  }
  
  .step-3 #suburb {
    min-width: 50px;
    width: 70%;
  }
  
  .step-3 #postcode {
    display: inline;
    min-width: 50px;
    width: 27%;
    margin-left: 1%;
  }
  
  .step-3 .agent-code {
    margin: 36.5px 0 30px 0;
    background-color: var(--background-color);
  }
  
  .step-3 .agent-code #agent_code {
    margin: 30px;
    min-width: 80%;
    width: 80%;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    padding-left: 0px;
  }



}




.step-4 h4 {
  text-align: center;
  margin-bottom: 15px;
}

.stepper-buttons {
  width: 30%;
  color: white;
  background-color: var(--accent-color);
  border-radius: 5px;
  cursor: pointer;
}

#stepper-next {
  float: right;
}

.sign-up-page .signup-form .all-buttons #stepper-submit {
  float: right;
  border: none;
}

#stepper-next:hover {
  opacity: 80%;
}

#stepper-prev {
  float: left;
}

#stepper-prev:hover {
  opacity: 100%;
}

#stepper-icons .step-icon {
  background-color: var(--hero-background-color) !important;
}

#stepper-steps {
  display: inline;
  line-height: 45px;
}

.hidden {
  display: none;
}

.not-seen {
  visibility: hidden;
}


#recaptcha-box {
  margin: 15px 0 11.5px 0;
  padding: 15px;
  background-color: var(--background-color);
  border-radius: 5px;
}

#recaptcha-box .recaptcha-container {
  margin: 20px;
}


#recaptcha-box #captcha {
  border-radius: 5px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  border: solid 1px var(--hero-background-color);
}

#recaptcha-box #captcha-input {
  display: inline-block;
  min-width: 220px;
  margin: 10px 0 3px 0;
  text-align: center;
  padding-left: 0px;
  font-size: 18px;
  font-weight: bold;
  color: var(--hero-background-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  border: none;
}

#recaptcha-box #captcha-input::placeholder {
  font-weight: normal;
}


/*  */
/* Signup Page Animated Checkmark */
/*  */

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-check {
  height: 10em;
  width: 10em
}

.animated-check path {
  fill: none;
  stroke: #00A693;
  stroke-width: 4;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: draw 1s linear forwards;
  stroke-linecap: round;
  stroke-linejoin: round
}

@keyframes draw {
  to {
      stroke-dashoffset: 0
  }
}
.signup-success {
  padding: 20px 0 20px 0;
}
.signup-success p {
  font-size: 20px;
  margin-top: 40px;
}

.signup-success #email_confirmation {
  color: var(--accent-color);
  margin-bottom: 35px;
}


/* Mobile Applications page */

.app-box {
  padding: 4%;
  text-align: center;
}

.starter-section .provisioning-box {
  border: solid 1px var(--accent-color);
  background-color: blue;
}

.downloads h3, .downloads p {
  text-align: center;
}

.text-left {
  text-align: left !important;
}

/* .app-box img {
  /* min-width: 200px; */
  /* width: 150px;
  padding: 0px 0px 0px 0px;
} */ */

.ios-badge img {
  width: 300px;
  padding: 12px;
}

.play-badge {
  width: 150px;
}

.app-box .windows-badge {
  width: 150px;
}

.zoiper-badge {
  width: 100px;
}

.linphone-badge {
  width: 90px;
}

.bria-badge {
  width: 95px;
}

.integration-logo {
  max-height: 80px;
}

.phone-logo {
  max-height: 70px;
  max-width: 200px;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/*--------------------------------------------------------------
# Configuration Guide pages
--------------------------------------------------------------*/

.configuration .config {
  background-color: var(--alt-background-color);
  padding: 20px;
  /* margin: 0px 20px; */
  min-width: 50%;
  display: inline-block;
}

.configuration span {
  color: #ff4a17;
}

@media (max-width: 587px) {
  .configuration .config {
    min-width: 100%;
  }
}

/*--------------------------------------------------------------
# App pages
--------------------------------------------------------------*/

.app-page {
 background-color: white;
}

.app-page .section-title img:nth-of-type(1){
  height: 60px;
}

.zoiper-logo {
  height: 80px;
}

.bria-logo {
  height: 70px;
}

.linphone-logo {
  height: 60px;
}

.pbx-3cx-logo {
  height: 60px;
}

.app-page .plus {
  font-size: 24px;
  color: var(--accent-color);
}

.btn-zoiper {
  background-color: #F4791F;
  color: #fff;
}

.btn-bria {
  background: #FF4001;
  color: #fff;
}

.btn-linphone {
  background: #FE723C;
  color: #fff;
}

.app-info h4 {
  color: #404040;
}

/*--------------------------------------------------------------
# Web Conference Page
--------------------------------------------------------------*/

.screenshot img {
  width: 100%;
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
  padding-top: 100px;
}

.privacy h4, .privacy h5 {
  padding: 0.5em 0 0.3em 0;
}
/*--------------------------------------------------------------
# Hide Element
--------------------------------------------------------------*/

.hidden {
  display: none;
}

/*--------------------------------------------------------------
# Calling Rates Page
--------------------------------------------------------------*/

.calling-rates h4 {
  margin-bottom: 1em;
}

.calling-rates h5 {
  color: #404040;
  font-weight: 400;
}

.calling-rates h5 small {
  font-size: 0.8em;
  font-weight: 300;
}

/*--------------------------------------------------------------
# Shop
--------------------------------------------------------------*/

.shop-text {
  text-align: center;
  font-size: 18px;
}

.shop-highlight {
  /* color: var(--accent-color); */
  font-weight: 600;
}

.center {
  text-align: center;
}

.team-member:hover .img-thumbnail {
  background: transparent;
  background-color: #00b29e;
}

.team-member .img-thumbnail {
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-transition: background .3s color .3s box-shadow .3s;
  -moz-transition: background .3s color .3s box-shadow .3s;
  transition: background .3s color .3s box-shadow .3s;
}

.team-content {
  background: #fff;
  padding: 15px;
  border-bottom: 4px solid #f0f0f0;
  height: 100%;
}

.team-content h5 {
  font-size: 18px;
  font-weight: bold;
}

.team-content:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 15px;
  margin-left: -15px;
}

.team-member .btn {
  margin-top: 10px;
  margin-bottom: 5px;
}

.team-image {
  position: relative;
  padding: 0;
}

.team-image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  vertical-align: middle;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
}

.team-image .overlay .preview {
  position: relative;
  top: 50%;
  display: inline-block;
  margin-top: -20px;
}

.team-image:hover .overlay {
  opacity: 1;
}

#meet-the-team .role {
  margin-top: 10px;
  display: block;
  font-size: 14px;
  color: var(--accent-color);
}

.test-flex {
  display: flex;
}


/* Custom pricing plan calculator */

.container-calc .number-input input {
  max-width: 80px;
  height: 45px;
  font-size: 24px;
  color: var(--heading-color);
  text-align: center;
  font-weight: 600;
  border-radius: 5px;
  outline: 1px solid rgb(232, 232, 232);
  border: none;
}

.container-calc .number-input input:focus {
  outline: var(--accent-color) solid 1px;
}

.container-calc .number-input input:hover {
  cursor: default;
}

.container-calc .form-label {
  color: var(--accent-color);
  font-size: 20px;
  font-weight: 500;
}

.form-range::-webkit-slider-thumb {
  background-color: var(--heading-color);
}

.maximum-reached::-webkit-slider-thumb {
  background-color: var(--accent-color) !important;
}


/* Toggle on/off button */

.plus-minus-toggle {
  cursor: pointer;
  height: 21px;
  position: relative;
  width: 21px;
  /* padding: 5px; */
  &:before,
  &:after{
    background: var(--hero-background-color);
    content: '';
    height: 5px;
    position: absolute;
    top: 8px;
    width: 21px;
    transition: transform 300ms ease;
  }
  &:after {
    transform-origin: center;
  }
  &.collapsed {
    &:after {
      transform: rotate(90deg);
    }
    &:before {
      transform: rotate(180deg);
    }
  }
}

.btn-toggle {
  display: inline-block;
  min-width: 30px;
  width: 50px;
  cursor: pointer;
}


.display-broadband {
  transition: transform 500ms ease;
  display: inline-block;
}

.no-display-broadband {
  transition: transform 500ms ease;
  display: none;
}

#custom_plan li {
  padding: 2px 0px;
}

#custom_plan .gst-line {
  display: inline;
  font-size: 14px;
  color: grey;
}

#custom_plan h6 .title-price {
  opacity: 80%;
}

@media (max-width: 420px) {
  #broadband_select {
    font-size: 14px;
  }
  
}

#minutes_value, #tollfree_value, #channels_value {
  caret-color: transparent;
}

#tollfree_label {
  margin-bottom: 0px;
}

#display_broadband h6 {
  margin: 20px 0px 0px;
}

.video-thumbnail {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px; /* adjust as needed */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.video-thumbnail:hover img {
  transform: scale(1.05);
}

.video-thumbnail .play-button {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: #ff0000; /* bright YouTube red */
  opacity: 0.9;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-thumbnail:hover .play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}