/* 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: #061426; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #00cfe8; /* 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 */
}

/* 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: #00cfe8; /* 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: #00cfe8; /* 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: #061426;
  --hero-color: #ffffff;
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  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: #061426;
  --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: 36px;
  margin-right: 8px;
}

.header .logo .sitename {
  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: #ffffff;
  background: rgba(0, 207, 232, 0.12);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  border: 1px solid rgba(0, 207, 232, 0.75);
  transition: 0.3s;
  box-shadow: 0 8px 22px rgba(0, 207, 232, 0.12);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: #061426;
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 10px 26px rgba(0, 207, 232, 0.22);
}

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

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

  .header .navmenu {
    order: 3;
  }
}

/* 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(6, 20, 38, 0.96);
  box-shadow: 0 14px 36px rgba(6, 20, 38, 0.22);
}

/*--------------------------------------------------------------
# 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 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: -129px;
    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%);
  }
}

/* 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: var(--default-color);
  background-color: var(--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 .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

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

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.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;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

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

.footer .footer-contact p {
  margin-bottom: 5px;
}

.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;
}

/*--------------------------------------------------------------
# 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);
  padding: 20px 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;
  }
}

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

.section-title h2 {
  font-size: 32px;
  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;
}

.showcase-section,
.contact-modern,
.privacy-modern {
  --background-color: #f3fafc;
}

.about-modern {
  --background-color: #ffffff;
}

.showcase-section,
.about-modern,
.contact-modern,
.privacy-modern {
  position: relative;
}

.showcase-section::before,
.contact-modern::before,
.privacy-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 207, 232, 0.06), transparent 220px),
    linear-gradient(90deg, rgba(6, 20, 38, 0.04), transparent 42%, rgba(0, 207, 232, 0.05));
}

.showcase-section > *,
.about-modern > *,
.contact-modern > *,
.privacy-modern > * {
  position: relative;
  z-index: 1;
}

/*--------------------------------------------------------------
# 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: 64vh;
  position: relative;
  padding: 96px 0 42px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero .hero-copy {
  max-width: 560px;
}

.hero .hero-eyebrow {
  color: var(--accent-color);
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.08;
  max-width: 620px;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  margin: 18px 0 28px 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  max-width: 560px;
}

.hero .hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero .hero-img {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
  overflow: visible;
}

.hero .hero-img img {
  width: min(100%, 720px);
  max-height: 470px;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 45px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 32px rgba(0, 207, 232, 0.32));
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.3s;
  color: #ffffff;
  font-weight: 700;
  padding: 12px 22px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 20%);
  border-radius: 50px;
  background: rgba(0, 207, 232, 0.14);
}

.hero .btn-free-trial {
  color: #ffffff;
  background: #09213c;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 800;
  padding: 13px 24px;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  transition: 0.3s;
  box-shadow: 0 12px 28px rgba(0, 207, 232, 0.12);
}

.hero .btn-free-trial:hover {
  color: #061426;
  background: var(--accent-color);
  box-shadow: 0 14px 34px rgba(0, 207, 232, 0.24);
}

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

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

.hero .btn-watch-video:hover i {
  color: #061426;
}

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

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 92px 0 36px 0;
  }

  .hero .hero-copy {
    text-align: center;
    max-width: none;
  }

  .hero h1 {
    font-size: 30px;
    line-height: 1.16;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 22px;
  }

  .hero .hero-actions {
    justify-content: center;
  }

  .hero .hero-img {
    min-height: 230px;
  }

  .hero .hero-img img {
    max-height: 280px;
  }

  .hero .btn-watch-video {
    font-size: 14px;
  }
}

@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%);
  padding: 12px 0;
}

.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-modern .about-copy,
.privacy-modern .privacy-card {
  max-width: 980px;
  background: #ffffff;
  border: 1px solid rgba(6, 20, 38, 0.08);
  border-top: 3px solid rgba(0, 207, 232, 0.68);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(6, 20, 38, 0.08);
  padding: 34px 38px;
}

.about-modern .about-copy {
  margin: 0 auto;
}

.about-modern .about-copy p,
.privacy-modern .privacy-card p {
  color: color-mix(in srgb, var(--default-color), transparent 14%);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 0;
}

.privacy-modern .privacy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.privacy-modern .privacy-card p {
  max-width: 700px;
}

.privacy-modern .privacy-read-more {
  color: #ffffff;
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  box-shadow: 0 10px 24px rgba(6, 20, 38, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--heading-font);
  font-weight: 800;
  padding: 11px 24px;
  transition: 0.3s;
}

.privacy-modern .privacy-read-more:hover {
  color: #061426;
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 14px 30px rgba(0, 207, 232, 0.2);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .about-modern .about-copy,
  .privacy-modern .privacy-card,
  .portfolio .isotope-layout,
  .contact .info-wrap,
  .contact .php-email-form {
    padding: 24px;
  }

  .privacy-modern .privacy-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .privacy-modern .privacy-read-more {
    width: 100%;
  }
}

.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: 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: 50px 30px;
  transition: all ease-in-out 0.4s;
  background-color: var(--contrast-color);
  height: 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 {
  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(-10px);
}

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

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --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: cover;
  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 .isotope-layout {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(6, 20, 38, 0.07);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(6, 20, 38, 0.08);
  padding: 24px;
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 24px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 9px 18px;
  margin: 0 4px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50px;
  border: 1px solid rgba(6, 20, 38, 0.1);
  color: #061426;
  background: #ffffff;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: #061426;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 10px 22px rgba(0, 207, 232, 0.18);
}

.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;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(6, 20, 38, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio .portfolio-item img {
  width: 100%;
  transition: transform 0.45s ease;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transform: translateY(100%);
  transition: all ease-in-out 0.35s;
  background: rgba(6, 20, 38, 0.9);
  border-top: 1px solid rgba(0, 207, 232, 0.42);
  padding: 16px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  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: var(--accent-color);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #ffffff;
}

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

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  transform: translateY(0);
}

.portfolio .portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(6, 20, 38, 0.13);
}

.portfolio .portfolio-item:hover img {
  transform: scale(1.04);
}

/*--------------------------------------------------------------
# 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%;
}

@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: #f3fafc;
  padding-top: 48px;
  padding-bottom: 58px;
  scroll-margin-top: 118px;
}

.pricing .section-title {
  padding-bottom: 24px;
}

.pricing .pricing-container {
  max-width: 1220px;
}

.pricing .trial-strip {
  background: linear-gradient(135deg, #061426 0%, #092842 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 207, 232, 0.35);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(6, 20, 38, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 32px;
  margin: 0 auto 24px;
  width: 100%;
}

.pricing .trial-strip h3 {
  color: #ffffff;
  font-size: 28px;
  margin: 4px 0 6px;
  padding: 0;
}

.pricing .trial-strip p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-weight: 600;
}

.pricing .trial-kicker {
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.pricing .trial-strip-btn {
  color: #061426;
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 50px;
  flex-shrink: 0;
  font-family: var(--heading-font);
  font-weight: 800;
  padding: 12px 26px;
}

.pricing .trial-strip-btn:hover {
  color: #061426;
  background: var(--accent-color);
}

.pricing .trial-strip-btn.disabled,
.pricing .trial-btn.disabled {
  cursor: not-allowed;
  opacity: 0.58;
  pointer-events: none;
}

.pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pricing .pricing-item {
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(6, 20, 38, 0.07);
  border: 1px solid rgba(6, 20, 38, 0.09);
  border-top: 3px solid rgba(0, 207, 232, 0.45);
  padding: 24px 22px 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 372px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing .pricing-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(6, 20, 38, 0.11);
  border-color: rgba(0, 207, 232, 0.55);
}

.pricing .plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #061426;
  background: var(--accent-color);
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}

.pricing h3 {
  font-weight: 800;
  margin-bottom: 12px;
  padding-right: 68px;
  font-size: 21px;
  color: #061426;
}

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

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

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  font-size: 14px;
  font-weight: 700;
}

.pricing .contact-price {
  color: #061426;
  font-size: 26px;
}

.pricing .plan-note {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  min-height: 38px;
  margin: 8px 0 0;
  font-weight: 600;
  line-height: 1.4;
}

.pricing ul {
  padding: 16px 0 18px;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  text-align: left;
  line-height: 1.32;
  margin: 0;
  flex: 1;
}

.pricing ul li {
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pricing ul i {
  color: var(--accent-color);
  font-size: 15px;
  padding-top: 2px;
  flex-shrink: 0;
}

.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 .pricing-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}

.pricing .trial-btn,
.pricing .buy-btn {
  border-radius: 50px;
  display: block;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
  padding: 10px 14px;
  text-align: center;
  transition: 0.3s;
}

.pricing .trial-btn {
  color: #09213c;
  background: #ffffff;
  border: 1px solid rgba(6, 20, 38, 0.16);
}

.pricing .trial-btn:hover {
  color: #061426;
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
}

.pricing .buy-btn {
  color: #ffffff;
  background-color: #061426;
  border: 1px solid rgba(0, 207, 232, 0.7);
  box-shadow: 0 10px 22px rgba(6, 20, 38, 0.12);
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #061426;
  box-shadow: 0 14px 28px rgba(0, 207, 232, 0.22);
}

.pricing .featured {
  border-top-color: var(--accent-color);
  box-shadow: 0 14px 34px rgba(0, 207, 232, 0.13);
}

.pricing .featured .buy-btn {
  background: #061426;
  color: #ffffff;
}

.pricing .contact-plan {
  background: linear-gradient(180deg, #ffffff 0%, #f3fdff 100%);
}

@media (max-width: 991px) {
  .pricing .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing .pricing-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .pricing .trial-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing .trial-strip-btn {
    text-align: center;
    width: 100%;
  }

  .pricing .pricing-actions {
    grid-template-columns: 1fr;
  }

  .pricing .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.pricing .additional-cost {
  margin: 15px 0;
  padding: 8px 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-left: 3px solid var(--accent-color);
  font-size: 14px;
  border-radius: 3px;
  color: var(--accent-color);
  font-weight: 600;
  text-align: center;
}

.pricing .pricing-item ul li:nth-of-type(8) {
  display: none;
}

@media (max-width: 1200px) {
  .pricing h3 {
    font-size: 18px;
  }
  
  .pricing h4 {
    font-size: 42px;
  }
  
  .pricing ul {
    font-size: 14px;
  }
}

@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;
  }
}

/*--------------------------------------------------------------
# Login Section
--------------------------------------------------------------*/
.auth-section {
  --background-color: #f3fafc;
  min-height: calc(100vh - 80px);
  padding: 132px 0 72px;
  position: relative;
}

.auth-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(6, 20, 38, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(0, 207, 232, 0.08), transparent 260px);
}

.auth-section .container {
  position: relative;
  z-index: 1;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  margin: 0 auto;
  max-width: 1080px;
}

.auth-shell-reverse {
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

.auth-shell-compact {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
}

.auth-panel,
.auth-card,
.auth-status-card {
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(6, 20, 38, 0.12);
}

.auth-panel {
  background: linear-gradient(135deg, #061426 0%, #092842 100%);
  border: 1px solid rgba(0, 207, 232, 0.32);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.auth-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(0, 207, 232, 0.25);
  border-radius: 50%;
}

.auth-kicker {
  color: var(--accent-color);
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-panel h2,
.auth-card h1,
.auth-status-card h1 {
  font-weight: 800;
  line-height: 1.12;
}

.auth-panel h2 {
  color: #ffffff;
  font-size: 42px;
  margin: 14px 0;
}

.auth-panel p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}

.auth-highlights {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.auth-highlights div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 207, 232, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.auth-highlights div:hover {
  border-color: rgba(0, 207, 232, 0.48);
  transform: translateX(4px);
}

.auth-highlights i {
  color: var(--accent-color);
  font-size: 20px;
}

.auth-card,
.auth-status-card {
  background: #ffffff;
  border: 1px solid rgba(6, 20, 38, 0.08);
  border-top: 3px solid rgba(0, 207, 232, 0.68);
  padding: 34px;
}

.auth-card-header {
  margin-bottom: 24px;
}

.auth-card h1,
.auth-status-card h1 {
  color: #061426;
  font-size: 28px;
  margin: 8px 0 6px;
}

.auth-card-header p,
.auth-status-card p {
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
}

.auth-field {
  margin-bottom: 17px;
}

.auth-field label {
  color: #061426;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 7px;
}

.auth-field .form-control,
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
  background: #f8fcfd;
  border: 1px solid rgba(6, 20, 38, 0.12);
  border-radius: 8px;
  box-shadow: none;
  color: var(--default-color);
  min-height: 46px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.auth-field .form-control:focus,
.auth-field input[type="text"]:focus,
.auth-field input[type="email"]:focus,
.auth-field input[type="password"]:focus {
  background: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(0, 207, 232, 0.12);
}

.auth-check {
  margin: 4px 0 22px;
}

.auth-submit,
.auth-status-link {
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  box-shadow: 0 12px 26px rgba(6, 20, 38, 0.14);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font);
  font-weight: 800;
  min-height: 46px;
  padding: 11px 24px;
  transition: 0.3s;
  width: 100%;
}

.auth-submit:hover,
.auth-status-link:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 14px 30px rgba(0, 207, 232, 0.2);
  color: #061426;
  transform: translateY(-2px);
}

.auth-link-row {
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  text-align: center;
}

.auth-link-row,
.auth-link-row a {
  font-size: 14px;
  font-weight: 800;
}

.auth-link-row a {
  color: #078aa0;
}

.auth-link-row a:hover {
  color: #061426;
}

.auth-status-card {
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}

.auth-status-icon {
  align-items: center;
  background: rgba(0, 207, 232, 0.12);
  border: 1px solid rgba(0, 207, 232, 0.45);
  border-radius: 50%;
  color: var(--accent-color);
  display: inline-flex;
  font-size: 34px;
  height: 74px;
  justify-content: center;
  margin-bottom: 18px;
  width: 74px;
}

.auth-status-error {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.32);
  color: #dc3545;
}

.auth-status-link {
  margin-top: 24px;
  width: auto;
}

@media (max-width: 991px) {
  .auth-shell,
  .auth-shell-reverse,
  .auth-shell-compact {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    padding: 34px;
  }

  .auth-panel h2 {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .auth-section {
    padding: 104px 0 44px;
  }

  .auth-panel,
  .auth-card,
  .auth-status-card {
    padding: 24px;
  }

  .auth-link-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.login-section {
  --background-color: #f3fafc;
  min-height: calc(100vh - 80px);
  padding: 132px 0 72px;
  position: relative;
}

.login-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(6, 20, 38, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(0, 207, 232, 0.08), transparent 260px);
}

.login-section .container {
  position: relative;
  z-index: 1;
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 28px;
  align-items: stretch;
  margin: 0 auto;
  max-width: 1080px;
}

.login-panel,
.login-card {
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(6, 20, 38, 0.12);
}

.login-panel {
  background: linear-gradient(135deg, #061426 0%, #092842 100%);
  border: 1px solid rgba(0, 207, 232, 0.32);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.login-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(0, 207, 232, 0.25);
  border-radius: 50%;
}

.login-kicker {
  color: var(--accent-color);
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.login-panel h1 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  margin: 14px 0;
}

.login-panel p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
}

.login-highlights {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.login-highlights div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 207, 232, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.login-highlights div:hover {
  border-color: rgba(0, 207, 232, 0.48);
  transform: translateX(4px);
}

.login-highlights i {
  color: var(--accent-color);
  font-size: 20px;
}

.login-card {
  background: #ffffff;
  border: 1px solid rgba(6, 20, 38, 0.08);
  border-top: 3px solid rgba(0, 207, 232, 0.68);
  padding: 34px;
}

.login-card-header {
  margin-bottom: 24px;
}

.login-card h2 {
  color: #061426;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
}

.login-card-header p {
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  font-weight: 600;
  margin: 0;
}

.login-field {
  margin-bottom: 17px;
}

.login-field label {
  color: #061426;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 7px;
}

.login-field .form-control {
  background: #f8fcfd;
  border: 1px solid rgba(6, 20, 38, 0.12);
  border-radius: 8px;
  box-shadow: none;
  color: var(--default-color);
  min-height: 46px;
  padding: 11px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.login-field .form-control:focus {
  background: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(0, 207, 232, 0.12);
}

.login-options {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 22px;
}

.login-options,
.login-options a,
.show-password-label {
  font-size: 14px;
  font-weight: 700;
}

.show-password-label {
  align-items: center;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  display: flex;
  gap: 8px;
  margin: 0;
}

.show-password-label input {
  accent-color: var(--accent-color);
}

.login-options a,
.login-signup a {
  color: #078aa0;
}

.login-options a:hover,
.login-signup a:hover {
  color: #061426;
}

.login-submit {
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  box-shadow: 0 12px 26px rgba(6, 20, 38, 0.14);
  color: #ffffff;
  font-family: var(--heading-font);
  font-weight: 800;
  min-height: 46px;
  padding: 11px 24px;
  transition: 0.3s;
  width: 100%;
}

.login-submit:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 14px 30px rgba(0, 207, 232, 0.2);
  color: #061426;
  transform: translateY(-2px);
}

.login-signup {
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  text-align: center;
}

.login-signup,
.login-signup a {
  font-size: 14px;
  font-weight: 800;
}

#id_password::-webkit-password-toggle-button {
  display: none;
}

@media (max-width: 991px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-panel {
    padding: 34px;
  }

  .login-panel h1 {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .login-section {
    padding: 104px 0 44px;
  }

  .login-panel,
  .login-card {
    padding: 24px;
  }

  .login-options,
  .login-signup {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*--------------------------------------------------------------
# Remote Control Dashboard
--------------------------------------------------------------*/
.remote-control-card {
  background:
    linear-gradient(135deg, rgba(7, 24, 43, 0.98), rgba(7, 42, 62, 0.96)),
    radial-gradient(circle at 88% 12%, rgba(0, 207, 232, 0.2), transparent 32%);
  border: 1px solid rgba(0, 207, 232, 0.16);
  border-radius: 8px;
  box-shadow: 0 22px 58px rgba(6, 20, 38, 0.16);
  overflow: visible;
  padding: 18px;
}

.remote-control-layout {
  display: block;
}

.remote-control-intro {
  background: linear-gradient(135deg, #061426 0%, #092842 100%);
  border: 1px solid rgba(0, 207, 232, 0.32);
  border-radius: 8px;
  color: #ffffff;
  overflow: hidden;
  padding: 34px;
  position: relative;
}

.remote-control-intro::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(0, 207, 232, 0.25);
  border-radius: 50%;
}

.remote-eyebrow {
  color: var(--accent-color);
  display: inline-block;
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.remote-control-intro h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
}

.remote-control-intro p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

.remote-control-points {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.remote-control-points div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 207, 232, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.remote-control-points div:hover {
  border-color: rgba(0, 207, 232, 0.48);
  transform: translateX(4px);
}

.remote-control-points i {
  color: var(--accent-color);
  font-size: 20px;
}

.remote-control-form-wrap {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 207, 232, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
  padding: 18px;
}

.remote-connect-form,
.remote-settings-grid {
  display: grid;
  gap: 16px;
}

.remote-connect-form label {
  color: #061426;
  display: grid;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
}

.remote-connect-form input {
  background: #f8fcfd;
  border: 1px solid rgba(6, 20, 38, 0.12);
  border-radius: 8px;
  box-shadow: none;
  color: var(--default-color);
  min-height: 46px;
  padding: 11px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  width: 100%;
}

.remote-connect-form input:focus {
  background: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(0, 207, 232, 0.12);
  outline: none;
}

.remote-connect-form details {
  border-top: 1px solid rgba(6, 20, 38, 0.1);
  padding-top: 14px;
}

.remote-connect-form summary {
  color: color-mix(in srgb, var(--default-color), transparent 22%);
  cursor: pointer;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
}

.remote-settings-grid {
  margin-top: 16px;
}

.remote-connect-form button {
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  box-shadow: 0 12px 26px rgba(6, 20, 38, 0.14);
  color: #ffffff;
  font-family: var(--heading-font);
  font-weight: 800;
  min-height: 46px;
  padding: 11px 24px;
  transition: 0.3s;
}

.remote-connect-form button:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 14px 30px rgba(0, 207, 232, 0.2);
  color: #061426;
  transform: translateY(-2px);
}

.remote-pc-list {
  display: grid;
  gap: 14px;
}

.remote-pc-row {
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #f3fbfd);
  border: 1px solid rgba(0, 207, 232, 0.16);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.remote-pc-row:hover {
  border-color: rgba(0, 207, 232, 0.58);
  box-shadow: 0 18px 38px rgba(6, 20, 38, 0.13);
  transform: translateY(-3px);
}

.remote-pc-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.remote-pc-summary small {
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  display: block;
  font-weight: 700;
  margin-top: 3px;
}

.remote-pc-name {
  align-items: center;
  color: #061426;
  cursor: help;
  display: inline-grid;
  gap: 10px;
  grid-template-columns: auto auto;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 800;
  max-width: 100%;
  position: relative;
}

.remote-pc-name > i {
  align-items: center;
  background: rgba(0, 207, 232, 0.12);
  border: 1px solid rgba(0, 207, 232, 0.28);
  border-radius: 8px;
  color: #00bcd4;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.remote-pc-tooltip {
  background:
    linear-gradient(135deg, rgba(6, 20, 38, 0.98), rgba(5, 50, 70, 0.98));
  border: 1px solid rgba(0, 207, 232, 0.52);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(6, 20, 38, 0.32);
  color: #ffffff;
  display: grid;
  gap: 10px;
  font-family: var(--default-font);
  font-size: 13px;
  grid-column: 1 / -1;
  left: 0;
  max-height: 0;
  max-width: 440px;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  pointer-events: none;
  position: static;
  transform: perspective(700px) rotateX(var(--tip-y, 0deg)) rotateY(var(--tip-x, 0deg)) translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  visibility: hidden;
  z-index: 50;
}

.remote-pc-tooltip::after {
  background: #061426;
  border-left: 1px solid rgba(0, 207, 232, 0.52);
  border-top: 1px solid rgba(0, 207, 232, 0.52);
  content: "";
  height: 14px;
  left: 22px;
  position: absolute;
  top: -7px;
  transform: rotate(45deg);
  width: 14px;
  display: none;
}

.remote-pc-tooltip span {
  display: grid;
  gap: 3px;
}

.remote-pc-tooltip strong {
  color: #00cfe8;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.remote-pc-tooltip em {
  color: #ffffff;
  font-style: normal;
  font-weight: 700;
}

.remote-pc-name:hover .remote-pc-tooltip,
.remote-pc-name:focus .remote-pc-tooltip {
  max-height: 190px;
  opacity: 1;
  padding: 14px;
  transform: perspective(700px) rotateX(var(--tip-y, 0deg)) rotateY(var(--tip-x, 0deg)) translateY(0) scale(1);
  visibility: visible;
}

.remote-pc-row button {
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  border-radius: 50px;
  color: #ffffff;
  font-family: var(--heading-font);
  font-weight: 800;
  min-height: 40px;
  padding: 9px 20px;
  transition: 0.3s;
}

.remote-pc-row button:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 10px 24px rgba(0, 207, 232, 0.22);
  color: #061426;
  transform: translateY(-1px);
}

.remote-pc-row button:disabled {
  background: #d9e3e7;
  border-color: #d9e3e7;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  cursor: not-allowed;
}

.remote-empty-state {
  align-items: center;
  border: 1px dashed rgba(6, 20, 38, 0.16);
  border-radius: 8px;
  color: color-mix(in srgb, var(--default-color), transparent 24%);
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 36px 20px;
  text-align: center;
}

.remote-empty-state i {
  color: var(--accent-color);
  font-size: 42px;
}

.remote-empty-state p {
  margin: 0;
  font-weight: 700;
}

.remote-error {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: 8px;
  color: #b02a37;
  font-weight: 700;
  margin: 0 0 16px;
  padding: 12px 14px;
}

@media (max-width: 991px) {
  .remote-control-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .remote-control-intro,
  .remote-control-form-wrap {
    padding: 24px;
  }

  .remote-pc-row {
    grid-template-columns: 1fr;
  }

  .remote-pc-row button {
    width: 100%;
  }

  .remote-pc-tooltip {
    left: -6px;
    min-width: min(285px, calc(100vw - 58px));
  }
}

/*--------------------------------------------------------------
# PC Approval Result
--------------------------------------------------------------*/
.approval-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 207, 232, 0.16), transparent 34%),
    linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
  min-height: calc(100vh - 142px);
}

.approval-section {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 220px);
  padding: 80px 16px;
}

.approval-card {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 207, 232, 0.18);
  border-radius: 8px;
  box-shadow: 0 22px 62px rgba(6, 20, 38, 0.12);
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: 560px;
  padding: 28px;
  width: 100%;
}

.approval-mark {
  align-items: center;
  background: rgba(0, 207, 232, 0.14);
  border: 1px solid rgba(0, 207, 232, 0.28);
  border-radius: 8px;
  color: #00bcd4;
  display: inline-flex;
  font-size: 30px;
  height: 70px;
  justify-content: center;
  width: 70px;
}

.approval-error .approval-mark {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.22);
  color: #dc3545;
}

.approval-info .approval-mark {
  background: rgba(13, 110, 253, 0.1);
  border-color: rgba(13, 110, 253, 0.2);
  color: #0d6efd;
}

.approval-copy h1 {
  color: #061426;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 10px;
}

.approval-copy p {
  color: color-mix(in srgb, var(--default-color), transparent 22%);
  font-weight: 700;
  margin: 0;
}

.approval-pc {
  background: #f4fbfd;
  border: 1px solid rgba(0, 207, 232, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  margin-top: 18px;
  padding: 13px 14px;
}

.approval-pc strong {
  color: #061426;
  font-size: 16px;
}

.approval-pc span {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-weight: 700;
}

@media (max-width: 575px) {
  .approval-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
  margin-bottom: 40px;
}

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

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.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;
  transform: scale(-1, -1);
}

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

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

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

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

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

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# 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);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(6, 20, 38, 0.08);
  border: 1px solid rgba(6, 20, 38, 0.08);
  border-top: 3px solid rgba(0, 207, 232, 0.68);
  border-radius: 8px;
  padding: 30px;
  height: 100%;
}

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

.contact .info-item {
  margin-bottom: 28px;
  transition: transform 0.25s ease;
}

.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: 800;
  margin-bottom: 5px;
  color: #061426;
}

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

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

.contact .info-item:hover {
  transform: translateX(4px);
}

.contact iframe {
  border-radius: 8px;
  filter: saturate(0.9) contrast(1.03);
}

.contact .php-email-form {
  background: #ffffff;
  height: 100%;
  padding: 30px;
  border: 1px solid rgba(6, 20, 38, 0.08);
  border-top: 3px solid rgba(0, 207, 232, 0.68);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(6, 20, 38, 0.08);
}

@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: 11px 14px;
  box-shadow: none;
  border-radius: 8px;
  color: var(--default-color);
  background-color: #f8fcfd;
  border: 1px solid rgba(6, 20, 38, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.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);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 207, 232, 0.12);
}

.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: #ffffff;
  background: #061426;
  border: 1px solid rgba(0, 207, 232, 0.75);
  box-shadow: 0 10px 24px rgba(6, 20, 38, 0.12);
  font-family: var(--heading-font);
  font-weight: 800;
  padding: 11px 32px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  color: #061426;
  background: var(--accent-color);
  box-shadow: 0 14px 30px rgba(0, 207, 232, 0.2);
  transform: translateY(-2px);
}

@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;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.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 a {
  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 a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

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

.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);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}