/* 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: "Montserrat", 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: #212529;

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

  /* 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: #65c1e8;

  --accent-color-2: #24ffa4;

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

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

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

  /* 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: #3a3939;

  /* 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: #65c1e8;
}

/* 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 {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 40px;
  transition: all 0.5s;
  z-index: 997;
}

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

.header .logo img {
  max-height: 45px;
  margin-left: -2px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 600;
  padding-left: 3px;
}

@media (max-width: 1200px) {

  .header {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 10px 0px;
    transition: all 0.5s;
    z-index: 997;
  }

  .header .logo img {
    max-height: 28px;
    margin-right: 8px;
  }
  
  /* .header .logo h1 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    color: var(--heading-color);
  } */

  .header .logo {
    order: 1;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
}

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

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
  --heading-color: #32353a;
  --nav-color: #3a3939;
  --nav-hover-color: #65c1e8;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@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: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

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

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

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

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

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

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

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

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

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

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

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

/* Navmenu - Mobile */
@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 {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer-custom {
  background-image: url('../img/new/Investor\ page.jpg'); /* Replace with the path to your image */
  background-size: cover; /* Ensures the image covers the entire footer */
  background-position: center; /* Centers the image */
  color: white;
  text-align: center;
  padding: 20px;
}

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

.footer .footer-about .logo {
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 90px;
  margin-left: -25px;

}
.company-name {
  font-size: 1.5rem; /* Adjust the font size as needed */
  font-weight: bold; /* Make the text bold */
  color: #000; /* Change the color as needed */
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.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 50%);
  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 {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.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 {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

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

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

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

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

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

@media (max-width: 480px) {
  .footer .social-links {
    display: flex;
    justify-content: start;
    text-align: start;
  }
  
  .footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--default-color); /* Add missing semicolon */
    font-size: 16px;
    color: var(--default-color); /* Add missing semicolon */
    margin-right: 10px;
    transition: 0.3s;
  }
}


/*--------------------------------------------------------------
# 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: 40px;
  height: 40px;
  border-radius: 4px;
  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;
}

/*--------------------------------------------------------------
# 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 {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

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

.page-title nav 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: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 30px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #fafafa;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 160px 0 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

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

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

.hero h2 {
  color: var(--contrast-color);
  margin: 0;
  font-size: 44px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 5px 0 0 0;
  font-size: 20px;
}

.hero .btn {
  background-color: #65c1e8;
  padding: 10px 30px;
  margin-top: 30px;
  font-size: 16px;
  transition: background-color 0.3s, transform 0.2s;
}
 
.hero .btn:hover,
.hero .btn:focus:hover {
  color: var(--contrast-color);
  color: 64c2f5;
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px); /* Move the button down slightly on hover */
}


@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*------------------------------------
          About Us Section 
--------------------------------------*/
.section-about {
  text-align: start;
  padding-bottom: 60px;
  position: relative;
}

.section-about h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-about h2:before,
.section-about h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-about h2:before {
  margin-right: 15px;
}

.section-about h2:after {
  margin-left: 15px;
}

.about .content h3 {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
  border-radius: 7px;
  display: inline-block;
  text-align: center;
  margin-left: 90px; /* This margin is retained as per the original CSS */
}

.about .content h2 {
  font-weight: 700;
  text-align: center;
}

.about .content .btn-about {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .btn-about i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
}

.about .content .btn-about:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .icon-box {
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 820px) {
  .about .icon-box {
    padding: 20px;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .mission {
    margin-top: 3px;
  }
}

@media (max-width: 480px) {
  .about .icon-box {
    padding: 15px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .mission {
    margin-top: 20px;
  }
  .about .content h2 {
    font-size: 25px;
    margin: 0 auto;
    white-space: nowrap;
  }
  .about .content h3 {
    font-size: 16px;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--accent-color);
    border-radius: 7px;
    display: inline-block;
    text-align: center;
    margin: 0 70px; /* Adjusted margin */
  }
}

.about .icon-box i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.about .icon-box h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.about .icon-box p {
  margin-bottom: 0;
}

.about .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.about .img-fluid {
  border-radius: 10px;
  width: 100%;
}

/*------------------------------------
          Services Section 
--------------------------------------*/
.service-item {
  border: 1px solid #ccc;
  padding: 20px;
  height: 250px;
}

.services .icon {
  font-size: 24px;
  margin-right: 15px;
}

.services .title {
  margin-bottom: 10px;
}

.services .description {
  margin-bottom: 15px;
}

.services .btn-service {
  text-decoration: none;
  color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 14px;
}

.services .btn-service:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.services .service-item {
  position: relative;
  padding-top: 40px;
}

.services .service-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
}

.services .service-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent-color);
  border-right: 5px solid var(--background-color);
}

.services .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-right: 50px;
  line-height: 0;
}

.services .service-item .icon i {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 50px;
  z-index: 1;
  bottom: -15px;
  right: -15px;
  transition: 0.3s;
}

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

.services .service-item .title a {
  color: var(--heading-color);
}

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

.services .service-item .description {
  line-height: 24px;
  font-size: 14px;
}

@media (max-width: 768px) {
  #services .container.section-title {
    text-align: center;
    height: 100px;
  }

  #services .service-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }

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

  #services .service-item .title {
    font-size: 1.1rem;
  }

  #services .service-item .description {
    font-size: 0.9rem;
  }

  #services .service-item .btn {
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  #services .container.section-title {
    text-align: center;
    height: 100px;
  }

  #services .service-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
  }

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

  #services .service-item .title {
    font-size: 1rem;
  }

  #services .service-item .description {
    font-size: 0.8rem;
  }

  #services .service-item .btn {
    margin-top: 8px;
    padding: 5px 10px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

/*------------------------------------
         Contact Section 
--------------------------------------*/
.contact .info-box {
  color: #444444;
  background: #fafbff;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #fe1212;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #000000;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/*------------------------------------
       Digital Screen Pages 
--------------------------------------*/
/* digital section */
#digital {
  padding: 105px 0;
  background-color: #f9f9f9;
}

#digital .container {
  max-width: auto;
  margin: 0 auto;
}

#digital h2 {
  font-size: 2.5rem;
  color: #65c1e8;
  font-weight: 700;
}

#digital p {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
  text-align: start;
  margin-bottom: auto;
}

#digital .inline-paragraphs div {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #666;
}

#digital .inline-paragraphs div i {
  color: #65c1e8;
  margin-right: 8px;
}

#digital .btn-digital {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#digital .btn-digital i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
}

#digital .btn-digital:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

#digital .img-digital {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 820px) {
  #digital .row {
      flex-direction: column;
  }

  #digital .content {
      text-align: center;
  }

  #digital .content .read-more {
      justify-content: center;
  }

  #digital .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

@media (max-width: 480px) {
  #digital h2 {
      font-size: 2rem;
  }

  #digital p {
      font-size: 14px;
  }

  #digital .inline-paragraphs div {
      font-size: 14px;
  }

  #digital .row {
      flex-direction: column;
  }

  #digital .content {
      text-align: center;
  }

  #digital .content .read-more {
      justify-content: center;
  }

  #digital .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

/* Digital Power Section */
#digital-power {
  padding: 60px 0;
  background-color: #f8f9fa;
}

#digital-power .section-title {
    text-align: center;
    margin-bottom: 30px;
}

#digital-power .boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#digital-power .power-box {
    flex: 0 0 calc(25% - 20px);
    margin: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff;
    border-radius: 7px;
    transition: transform 0.3s ease-in-out;
}

#digital-power .power-box:hover {
    transform: translateY(-5px);
}

#digital-power .power-box img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

#digital-power .power-box p {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}

@media (max-width: 1024px) {
    #digital-power .boxes {
        justify-content: flex-start;
        overflow-x: hidden;
    }

    #digital-power .power-box {
        flex: 1 0 auto;
        max-width: calc(25% - 20px);
    }
}

@media (max-width: 767px) {
    #digital-power .section-title {
        font-size: 20px;
    }

    #digital-power .boxes {
        flex-direction: column;
        align-items: center;
    }

    #digital-power .power-box {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    #digital-power .power-box img {
        max-width: 100%;
    }

    #digital-power .power-box p {
        font-size: 0.9rem;
    }
}

/* Reach Section */
.image-reach-boxes .box-reach {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image-reach-boxes .box-reach img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.image-reach-boxes .box-reach:hover img {
  transform: scale(1.1);
}

.box-reach p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  text-align: center;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.box-reach:hover p {
  opacity: 1;
}

@media (max-width: 767px) {
  .image-reach-boxes .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
  }
}

/* Reach Section */
.image-reach-boxes .box-reach {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image-reach-boxes .box-reach img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.image-reach-boxes .box-reach:hover img {
    transform: scale(1.1);
}

.box-reach p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    text-align: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.box-reach:hover p {
    opacity: 1;
}

@media (max-width: 767px) {
    .image-reach-boxes .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Slider Section */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.slide-box {
    background: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 1200px;
}

.slide .row {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}

.slide-description {
    padding: 20px;
    text-align: left;
}

.slide-description h3 {
    font-size: 20px;
    padding-left: 20px;
    font-weight: 700;
}

.slide-description p {
    font-size: 15px;
    padding-left: 60px;
}

.slide-image {
    text-align: right;
    overflow: hidden;
}

.slide-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: transform 0.6s ease;
}

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

.slider-controls {
    position: absolute;
    top: 50%;
    width: 88%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
}

.slider-controls button {
    background: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    border: none;
    padding: 13px;
    cursor: pointer;
    z-index: 10;
    margin-top: 40px;
}

.slider-controls button:hover {
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 480px) {
  .slide-description h3 {
      margin-left: -30px;
      text-align: start;
  }

  .slide-description p {
      margin-left: -30px;
      text-align: start;
  }

  .slide-image {
      margin-top: auto;
      margin-left: 20px;
      width: 450px;
  }

  .slider-controls button {
      background: rgba(0, 0, 0, 0.5);
      color: rgb(255, 255, 255);
      border: none;
      padding: 10px;
      cursor: pointer;
      z-index: 10;
      margin-top: 100px;
      margin-left: 10px;
      margin-right: -15px;
  }
}

/* Friendlist Section */
.friendliest {
  background-color: #f2f2f2;
  padding: 50px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

.section-title p {
  font-size: 16px;
  color: #666;
}

.box-friendliest {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.box-friendliest:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.box-friendliest h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
}

.box-friendliest p {
  font-size: 16px;
  color: #666;
}

.box-friendliest i {
  font-size: 40px;
  margin-bottom: 20px;
  color: #fe1212; 
}

.box-friendliest p {
  font-size: 16px;
  color: #000000; 
}

/*------------------------------------
       Sms Solution Pages
--------------------------------------*/

#sms {
  padding: 105px 0;
  background-color: #f9f9f9;
}

#sms .container {
  max-width: auto;
  margin: 0 auto;
}

#sms h2 {
  font-size: 2.5rem;
  color: #65c1e8;
  font-weight: 700;
}

#sms p {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
  text-align: start;
  margin-bottom: auto;
}

#sms .sms-inline-paragraphs div {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #666;
}

#sms .sms-inline-paragraphs div i {
  color: #65c1e8;
  margin-right: 8px;
}

#sms .btn-sms {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#sms .btn-sms i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
}

#sms .btn-sms:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

#sms .img-sms {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 820px) {
  #sms .row {
      flex-direction: column;
  }

  #sms .content {
      text-align: center;
  }

  #sms .content .btn-sms {
      justify-content: center;
  }

  #sms .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

@media (max-width: 480px) {
  #sms h2 {
      font-size: 2rem;
  }

  #sms p {
      font-size: 14px;
  }

  #sms .sms-inline-paragraphs div {
      font-size: 14px;
  }

  #sms .row {
      flex-direction: column;
  }

  #sms .content {
      text-align: center;
  }

  #sms .content .btn-sms {
      justify-content: center;
  }

  #sms .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

/* Companies Section*/
.companies.section {
  padding: 60px 0;
  background: #f1f1f1;
}

.companies .section-title {
  text-align: center;
  margin-bottom: 50px;
}

.companies .section-title h2 {
  font-size: 36px;
  font-weight: 700;
  color: #333;
}

.companies .section-title p {
  font-size: 16px;
  color: #777;
  margin-top: 10px;
}

/* Company box styling */
.company-box {
  background: #fff;
  border: 1px solid #ddd;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.company-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.company-box .icon {
  font-size: 48px;
  color: #fe1212;
  margin-bottom: 20px;
}

.company-box h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.company-box h3 .title-part {
  display: block;
}

.company-box p {
  font-size: 16px;
  color: #777;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .company-box {
    margin-bottom: 30px;
  }
}

/* Slide Section*/
.sms-slide {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sms-slide .slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.sms-slide .slide {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.sms-slide .slide-box {
  background: rgba(255, 255, 255, 0.5); 
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  backdrop-filter: blur(3px); 
}

.sms-slide .slide .row {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
}

.sms-slide .slide-description {
  padding: 20px;
  text-align: left;
}

.sms-slide .slide-description h3 {
  font-size: 20px;
  padding-left: 20px;
  font-weight: 700;
}

.sms-slide .slide-description p {
  font-size: 15px;
  padding-left: 60px;
}

.sms-slide .slide-image {
  text-align: right;
  overflow: hidden; 
}

.sms-slide .slide-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  transition: transform 0.6s ease; 
}

.sms-slide .slide-image img:hover {
  transform: scale(1.1); 
}

.sms-slide .slider-controls {
  position: absolute;
  top: 50%;
  width: 88%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10; 
}

.sms-slide .slider-controls button {
  background: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  border: none;
  padding: 13px;
  cursor: pointer;
  z-index: 10; 
  margin-top: 130px;
}

.sms-slide .slider-controls button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/*Pricing Section*/
.pricing.section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
}

.section-title p {
  font-size: 16px;
  color: #777;
  margin-top: 10px;
}

.pricing-item {
  background: #fff;
  border: 1px solid #ddd;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.pricing-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.pricing-item h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.pricing-item .price {
  font-size: 36px;
  font-weight: 700;
  color: #fe1212;
  margin-bottom: 20px;
}

.pricing-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}

.pricing-item ul li {
  font-size: 16px;
  color: #555;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.pricing-item ul li span {
  display: block;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.pricing-item ul li p {
  margin: 0 0 0 6px;
  color: #777;
  display: inline-block;
}

.pricing-item .buy-btn {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 50px;
  background: #fe1212;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.3s ease-in-out;
}

.pricing-item .buy-btn:hover {
  background: #e64a19;
}

.pricing-item.featured {
  background: #ff5828;
  color: #fff;
  border: 1px solid #ff5828;
}

.pricing-item.featured h3,
.pricing-item.featured .price,
.pricing-item.featured ul li {
  color: #fff;
}

.pricing-item.featured ul li span {
  color: #fff;
}

.pricing-item.featured .buy-btn {
  background: #fff;
  color: #ff5828;
}

.pricing-item.featured .buy-btn:hover {
  background: #f1f1f1;
  color: #ff5828;
}

@media (max-width: 768px) {
  .pricing-item {
    margin-bottom: 20px;
  }
}


/*------------------------------------
          Business Pages
--------------------------------------*/
#business {
  padding: 105px 0;
  background-color: #f9f9f9;
}

#business .container {
  max-width: auto;
  margin: 0 auto;
}

#business h2 {
  font-size: 30px;
  color: #65c1e8;
  font-weight: 700;
}

#business p {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
  text-align: start;
  margin-bottom: auto;
}

#business .business-inline-paragraphs div {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #666;
}

#business .business-inline-paragraphs div i {
  color: #65c1e8;
  margin-right: 8px;
}

#business .btn-sms {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#business .btn-sms i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
}

#business .btn-sms:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

#business .img-business {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  
}

@media (max-width: 820px) {
  #business .row {
      flex-direction: column;
  }

  #business .content {
      text-align: center;
  }

  #business .content .btn-sms {
      justify-content: center;
  }

  #business .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

@media (max-width: 480px) {
  #business h2 {
      font-size: 2rem;
  }

  #business p {
      font-size: 14px;
  }

  #business .business-inline-paragraphs div {
      font-size: 14px;
  }

  #business .row {
      flex-direction: column;
  }

  #business .content {
      text-align: center;
  }

  #business .content .btn-sms {
      justify-content: center;
  }

  #business .col-lg-7 {
      order: -1;
      text-align: center;
  }
}

/* Business Section */
#business-company {
  padding: 80px 0;
  background-color: #f9f9f9;
}

#business-company .section-title h2 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

#business-company .section-title p {
  font-size: 18px;
  color: #666;
  text-align: center;
  margin-bottom: 50px;
}

#business-company .company-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 90%;
}

#business-company .company-box:hover {
  transform: translateY(-10px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
}

#business-company .company-box .icon {
  font-size: 40px;
  color: #fe1212;
}

#business-company .company-box h3 {
  font-size: 24px;
  color: #333;
  margin-top: 20px;
  font-weight: 700;
}

#business-company .company-box p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-top: 20px;
}

@media (max-width: 768px) {
  #business-company .section-title h2 {
    font-size: 28px;
  }

  #business-company .section-title p {
    font-size: 16px;
  }

  #business-company .company-box {
    padding: 20px;
  }

  #business-company .company-box h3 {
    font-size: 20px;
  }

  #business-company .company-box p {
    font-size: 14px;
  }
}

/* Module Section Styling */
#module {
  padding: 80px 0;
}
  
#module h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
}
  
#module p {
  font-size: 18px;
  line-height: 1.6;
}
  
#module img {
  width: 100%; 
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out; 
}
  
#module img:hover {
  transform: scale(1.1); 
}
  
@media (max-width: 768px) {
  #module h2 {
    font-size: 28px;
  }
  
  #module img {
    width: 100%; 
  }
}

.sub-module {
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
  
.sub-module i {
  margin-right: 8px;
  color: #fe1212; 
}
  
.sub-module span {
  font-weight: 600;
  margin-right: 5px; 
}
  
@media (max-width: 480px) {
  .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px; 
  }
  
  .image-container {
    display: none; 
  }
  
  .image-container img {
    max-width: 100%; 
    height: auto;
  }
}
  
@media (max-width: 820px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/*------------------------------------
       Attendance Pages
--------------------------------------*/