/**
* Template Name: Arsha
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Updated: May 18 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 */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #37517e;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #47b2e4;

  /* Contrast Color - This is a color used for text 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. */
  --contrast-color: #ffffff;
}

body.dark-mode {
  --background-color: #0b1223;
  --default-color: #e2e8f0;
  --heading-color: #f8fafc;
  --accent-color: #7dd3fc;
  --contrast-color: #0f172a;
  --nav-color: #f8fafc;
  --nav-hover-color: #93c5fd;
  --hero-background-color: #0c1a3a;
  --hero-color: #f8fafc;
}

body.dark-mode {
  background: radial-gradient(circle at 15% 10%, rgba(71, 178, 228, 0.08), transparent 18%), radial-gradient(circle at 90% 18%, rgba(55, 81, 126, 0.12), transparent 20%), linear-gradient(180deg, #020617 0%, #0b1223 100%);
}

body.dark-mode::before {
  background-image: radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.08), transparent 28%), radial-gradient(circle at 80% 18%, rgba(71, 178, 228, 0.06), transparent 22%), radial-gradient(circle at 60% 78%, rgba(255, 255, 255, 0.04), transparent 20%);
}

body.dark-mode::after {
  opacity: 0.11;
}

body.dark-mode .header {
  --background-color: rgba(15, 23, 42, 0.98);
  --heading-color: #f8fafc;
  background-color: var(--background-color);
}

body.dark-mode .theme-toggle-btn {
  background: #ffffff;
  color: var(--contrast-color);
  border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .theme-toggle-btn:hover {
  background: #f8fafc;
}

body.dark-mode .navmenu ul {
  background: rgba(10, 16, 32, 0.96);
}

body.dark-mode .navmenu a,
body.dark-mode .navmenu a:focus {
  color: #e2e8f0;
}

body.dark-mode .navmenu a:hover,
body.dark-mode .navmenu .active,
body.dark-mode .navmenu .active:focus {
  color: #f8fafc;
  background: rgba(71, 178, 228, 0.14);
}

body.dark-mode .navmenu a i,
body.dark-mode .navmenu a:focus i {
  background-color: rgba(125, 211, 252, 0.12);
}

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

body.dark-mode .navmenu .dropdown ul {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .clients {
  --background-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 0;
}

body.dark-mode .clients .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.dark-mode .clients .swiper {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 8px 0;
  margin-left: 0;
  margin-right: 0;
}

body.dark-mode .clients .swiper-wrapper {
  padding: 0 1rem;
}

body.dark-mode .clients .swiper-slide {
  background: transparent;
}

body.dark-mode .team .team-member {
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

body.dark-mode .team .team-member .member-info {
  background: rgba(10, 16, 32, 0.86);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

body.dark-mode .team .team-member .member-info h4,
body.dark-mode .team .team-member .member-info span,
body.dark-mode .team .team-member .member-info p {
  color: var(--default-color);
}

body.dark-mode .team .team-left .social a {
  color: #cbd5e1;
}

body.dark-mode .team .team-left .social a:hover {
  color: #7dd3fc;
}

body.dark-mode .team .team-swiper .swiper-button-prev,
body.dark-mode .team .team-swiper .swiper-button-next {
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

body.dark-mode .team .team-swiper .swiper-button-prev::after,
body.dark-mode .team .team-swiper .swiper-button-next::after {
  color: #f8fafc;
}

body.dark-mode .team .team-swiper .swiper-pagination-bullet {
  background: rgba(248, 250, 252, 0.12);
}

body.dark-mode .team .team-swiper .swiper-pagination-bullet-active {
  background: #7dd3fc;
}

body.dark-mode .portfolio .portfolio-card {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

body.dark-mode .portfolio .portfolio-card-body p {
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

body.dark-mode .testimonials .testimonial-item {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

body.dark-mode .testimonials .testimonial-item .testimonial-quote {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .contact .info-wrap,
body.dark-mode .contact .php-email-form {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .contact .php-email-form input[type=text],
body.dark-mode .contact .php-email-form input[type=email],
body.dark-mode .contact .php-email-form textarea {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--default-color);
}

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

body.dark-mode .contact .info-item p,
body.dark-mode .contact .info-item h3 {
  color: var(--default-color);
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #ffffff;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #47b2e4;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #444444;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #47b2e4;
}

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

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background: radial-gradient(circle at 15% 10%, rgba(71, 178, 228, 0.10), transparent 18%), radial-gradient(circle at 90% 18%, rgba(55, 81, 126, 0.08), transparent 20%), linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  font-family: var(--default-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.18), transparent 28%), radial-gradient(circle at 80% 18%, rgba(71, 178, 228, 0.14), transparent 22%), radial-gradient(circle at 60% 78%, rgba(55, 81, 126, 0.10), transparent 20%);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}

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: 36px;
  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: linear-gradient(135deg, var(--accent-color), #36a3d8);
  font-size: 14px;
  padding: 10px 28px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 12px 28px rgba(71, 178, 228, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  background: #ffffff;
  color: var(--default-color);
  font-size: 18px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 12%);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(71, 178, 228, 0.22);
  background: linear-gradient(135deg, #3aacdf, #2f8cb8);
}

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

  .header .theme-toggle-btn {
    order: 2;
    margin: 0;
  }

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

  .header .navmenu {
    order: 4;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }

  .header .container-fluid {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
}

/* 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;
    margin: 0 10px;
  }

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

  .navmenu li:hover>a {
    z-index: 2;
  }

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

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

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

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    background: rgba(255,255,255,0.16);
    box-shadow: 0 10px 22px rgba(71, 178, 228, 0.14);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.28);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    transform: translateX(2px);
  }

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

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 26px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s, background 0.3s;
    background: rgba(255,255,255,0.14);
    border-radius: 16px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 12px 28px rgba(10, 20, 40, 0.16);
  }

  .mobile-nav-toggle:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.16);
  }

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

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 16px 20px 16px;
    padding: 22px 0;
    margin: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    overflow-y: auto;
    transition: transform 0.35s ease, opacity 0.35s ease;
    z-index: 9998;
    box-shadow: 0px 32px 80px rgba(29, 36, 61, 0.2);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 14px 22px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
    border-radius: 18px;
    margin: 0 16px 10px;
  }

  .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);
    background: rgba(71, 178, 228, 0.10);
    transform: translateX(2px);
  }

  .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(11, 22, 38, 0.92);
    backdrop-filter: blur(12px);
    transition: background 0.35s ease;
  }

  .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: 10px 0;
  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;
  min-width: 140px;
  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: 38px;
  height: 38px;
  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: 8px;
  transition: 0.3s;
}

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

.footer .footer-links ul a {
  transition: color 0.3s ease;
}

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

/*--------------------------------------------------------------
# Chatbot Button
--------------------------------------------------------------*/
.chatbot-button {
  position: fixed;
  right: 15px;
  bottom: 75px; /* Above the scroll-top button */
  z-index: 99999;
  background-color: var(--accent-color);
  width: 50px;
  height: 50px;
  border-radius: 50px;
  transition: all 0.4s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.chatbot-button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Chatbot Window
--------------------------------------------------------------*/
.chatbot-window {
  position: fixed;
  right: 15px;
  bottom: 135px; /* Above the button */
  width: 300px;
  height: 400px;
  background-color: var(--background-color);
  border: 1px solid var(--default-color);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 99998;
  flex-direction: column;
}

.chatbot-header {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 10px;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-close {
  background: none;
  border: none;
  color: var(--contrast-color);
  font-size: 20px;
  cursor: pointer;
}

.chatbot-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.chatbot-footer {
  padding: 10px;
  border-top: 1px solid var(--default-color);
  display: flex;
}

.chatbot-footer input {
  flex: 1;
  border: 1px solid var(--default-color);
  border-radius: 5px;
  padding: 5px;
}

.chatbot-footer button {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  margin-left: 5px;
  cursor: pointer;
}

.chatbot-footer button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

.about-animate-target {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.about-animate-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .about-animate-target {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*--------------------------------------------------------------
# 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: 50px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

.about.section {
  padding-top: 30px;
}

.about .section-title {
  padding-bottom: 25px;
}

@media (max-width: 1199px) {

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

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

.testimonials.section {
  padding-bottom: 40px;
}

.contact.section {
  padding-top: 40px;
}

.team.section {
  padding: 15px 0 5px;
}

.team .section-title {
  padding-bottom: 5px;
}

.team .team-toggle-btn {
  margin-bottom: 0;
}

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

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

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.16), transparent 18%), radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.10), transparent 14%), radial-gradient(circle at 55% 82%, rgba(71, 178, 228, 0.12), transparent 18%);
  pointer-events: none;
  z-index: 1;
}

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

.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: 5px 0 24px 0;
  font-size: 22px;
  line-height: 1.38;
  font-weight: 600;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: linear-gradient(135deg, var(--accent-color), #36a3d8);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 18px 45px rgba(71, 178, 228, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #3aacdf, #2f8cb8);
  box-shadow: 0 22px 48px rgba(71, 178, 228, 0.25);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}

.hero .btn-watch-video i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: color 0.3s ease, transform 0.3s ease;
  line-height: 0;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(71, 178, 228, 0.14);
  background: rgba(255,255,255,0.18);
}

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

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

@media (max-width: 767px) {
  .clients.section {
    padding: 24px 0;
  }

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

  .clients .swiper-wrapper {
    padding: 0 0.75rem;
  }

  .clients .swiper-slide img {
    max-height: 48px;
  }

  .team.section {
    padding: 10px 0 0;
  }

  .team .team-swiper {
    padding-bottom: 28px;
  }

  .team .team-member {
    padding: 18px 14px;
    gap: 12px;
  }

  .team .team-left {
    flex: 0 0 88px;
    width: 88px;
    gap: 10px;
  }

  .team .team-member .member-info {
    padding: 14px 16px;
    gap: 10px;
  }

  .team .team-member .social a {
    width: 32px;
    height: 32px;
  }

  .theme-toggle-btn {
    margin-left: 0;
  }
}

@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: 8px 0;
}

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

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

.clients .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients .swiper-slide img {
  max-height: 60px;
}

.clients .swiper-slide img {
  transition: 0.3s;
  padding: 0 10px;
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.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: 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: 90px 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.section {
  padding: 40px 0 30px;
}

.portfolio .section-title {
  padding-bottom: 28px;
}

.portfolio .portfolio-swiper {
  padding: 0 0 18px;
}

.portfolio .swiper-slide {
  display: flex;
  justify-content: center;
}

.portfolio .portfolio-card {
  width: min(840px, 100%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(29, 36, 61, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 420px;
}

.portfolio .portfolio-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 55px rgba(29, 36, 61, 0.10);
}

.portfolio .portfolio-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  overflow: hidden;
}

.portfolio .portfolio-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.portfolio .portfolio-card-media:hover img {
  transform: scale(1.05);
}

.portfolio .portfolio-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portfolio .portfolio-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portfolio .portfolio-card-body h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.portfolio .portfolio-card-body p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.8;
}

.portfolio .portfolio-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.portfolio .portfolio-card-meta span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-color);
  font-weight: 700;
}

.portfolio .portfolio-card-meta .preview-link {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--heading-color);
  color: var(--contrast-color);
  transition: transform 0.25s ease, background 0.25s ease;
}

.portfolio .portfolio-card-meta .preview-link:hover {
  transform: translateY(-2px);
  background: var(--accent-color);
}

@media (max-width: 991px) {
  .portfolio .portfolio-card {
    max-width: 100%;
    border-radius: 22px;
  }

  .portfolio .portfolio-card-body {
    padding: 18px;
  }

  .portfolio .portfolio-card-body h3 {
    font-size: 24px;
  }

  .portfolio .portfolio-card-meta {
    gap: 12px;
  }

  .portfolio .portfolio-card-media {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .portfolio .portfolio-card {
    border-radius: 22px;
  }

  .portfolio .portfolio-badge {
    top: 16px;
    left: 16px;
    padding: 8px 14px;
  }

  .portfolio .portfolio-card-body {
    padding: 18px;
  }

  .portfolio .portfolio-card-body h3 {
    font-size: 22px;
  }

  .portfolio .portfolio-card-meta span {
    font-size: 11px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 14px rgba(34, 64, 102, 0.08);
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 22px 18px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  text-align: left;
  min-height: auto;
  background: rgba(255, 255, 255, 0.98);
}

.team .team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0px 18px 40px rgba(34, 64, 102, 0.12);
}

.team .team-member .pic {
  overflow: hidden;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.team .team-member .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team .team-member .member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
  padding: 16px 18px 16px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(29, 36, 61, 0.06);
}

.team .team-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: auto;
  flex: 0 0 110px;
  width: 110px;
}

.team .team-left .social {
  margin-top: auto;
}

.team .team-member .member-info h4 {
  margin: 0;
  font-size: 19px;
}

.team .team-member .member-info span {
  display: block;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.team .team-member .member-info p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.team .team-member .social {
  display: flex;
  gap: 10px;
  margin: 0;
  width: 100%;
  justify-content: center;
}

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

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

@media (max-width: 992px) {
  .team .team-member {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .team .team-member .member-info {
    align-items: 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-swiper {
  position: relative;
  padding-bottom: 40px;
}

.team .team-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.team .team-swiper .team-member {
  max-width: 440px;
  width: 100%;
  height: 100%;
}

.team .team-swiper .swiper-button-prev,
.team .team-swiper .swiper-button-next {
  color: var(--default-color);
  top: auto;
  bottom: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.team .team-swiper .swiper-button-prev::after,
.team .team-swiper .swiper-button-next::after {
  font-size: 16px;
}

.team .team-swiper .swiper-pagination {
  margin-top: 18px;
}

.team .team-swiper .swiper-pagination-bullet {
  background: rgba(55, 81, 126, 0.25);
  opacity: 1;
}

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

.team .team-toggle-btn {
  border: 1px solid rgba(55, 81, 126, 0.2);
  background: transparent;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  margin-top: 20px;
}

.team .team-toggle-btn:hover,
.team .team-toggle-btn:focus {
  background: rgba(71, 178, 228, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.team .team-members.collapsed {
  display: none;
}

/*--------------------------------------------------------------
# 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 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 {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
}

.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: #059652;
  font-size: 24px;
  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);
}

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

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

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

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

.testimonials .testimonial-item {
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 16px 30px rgba(29, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.testimonials .testimonial-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(29, 36, 61, 0.10);
}

.testimonials .testimonial-item .testimonial-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonials .testimonial-item .testimonial-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--heading-color), transparent 35%);
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  object-fit: contain;
}

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

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

.testimonials .testimonial-item .stars {
  margin-top: 10px;
}

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

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

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

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -3px;
  position: relative;
  top: 8px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.testimonials .testimonial-item .testimonial-quote {
  display: block;
  padding: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 22px;
  min-height: 170px;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }

  .testimonials .testimonial-item .testimonial-profile {
    flex: 0 0 34%;
    min-width: 240px;
    margin-bottom: 0;
  }

  .testimonials .testimonial-item .testimonial-quote {
    flex: 1;
    min-height: auto;
    padding: 24px;
  }
}

@media (max-width: 991px) {
  .testimonials .testimonial-item {
    padding: 20px;
    gap: 18px;
  }

  .testimonials .testimonial-item .testimonial-profile {
    align-items: center;
    gap: 14px;
  }

  .testimonials .testimonial-item .testimonial-img {
    width: 72px;
    height: 72px;
  }

  .testimonials .testimonial-item .testimonial-quote {
    padding: 18px;
  }
}

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

/* Hero animated tagline */
.hero-typewriter {
  position: relative;
  display: inline-block;
  margin-top: 24px;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.1;
  overflow: hidden;
  max-width: min(100%, 520px);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .hero-typewriter {
    font-size: clamp(1rem, 4vw, 1.3rem);
    margin-top: 18px;
    max-width: 100%;
  }

  .hero-typewriter__ghost {
    display: none;
  }

  .hero-typewriter__type {
    white-space: normal;
    width: 100%;
  }

  .hero-typewriter__rotator {
    margin-left: 0.2rem;
    height: auto;
  }
}

.hero-typewriter__ghost {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.1);
  filter: blur(1.2px);
  transform: translateY(4px) scale(1.02);
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}

.hero-typewriter__type {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: hero-typewriter-typing 2.4s steps(30, end) 0.5s forwards;
}

.hero-typewriter__rotator {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-left: 0.4rem;
  height: 1.2em;
}

.hero-typewriter__rotator::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  animation: hero-caret-blink 0.8s step-end infinite 3s;
}

.hero-typewriter__rotator-inner {
  display: inline-block;
  animation: hero-rotate-words 14s ease-in-out infinite;
}

.hero-typewriter__rotator-inner span {
  display: block;
  line-height: 1.2;
  opacity: 0.92;
}

@keyframes hero-typewriter-typing {
  from {
    width: 0;
  }
  to {
    width: 30ch;
  }
}

@keyframes hero-caret-blink {
  0%, 40%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes hero-rotate-words {
  0%, 9% {
    transform: translateY(0);
    opacity: 1;
  }
  12% {
    opacity: 0.6;
  }
  18%, 25% {
    transform: translateY(-1.2em);
    opacity: 1;
  }
  28% {
    opacity: 0.6;
  }
  36%, 43% {
    transform: translateY(-2.4em);
    opacity: 1;
  }
  46% {
    opacity: 0.6;
  }
  54%, 61% {
    transform: translateY(-3.6em);
    opacity: 1;
  }
  64% {
    opacity: 0.6;
  }
  72%, 79% {
    transform: translateY(-4.8em);
    opacity: 1;
  }
  82% {
    opacity: 0.6;
  }
  90%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/*--------------------------------------------------------------
# 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%;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

@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%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

@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 .form-header h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.contact .php-email-form .form-header p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
}

.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: linear-gradient(135deg, var(--accent-color), #36a3d8);
  border: 0;
  padding: 12px 34px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  border-radius: 50px;
  box-shadow: 0 14px 30px rgba(71, 178, 228, 0.16);
}

.contact .php-email-form button[type=submit]:hover {
  background: linear-gradient(135deg, #3aacdf, #2f8cb8);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(71, 178, 228, 0.22);
}

@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 */
}