/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  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: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #124265; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #2487ce; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

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

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f6fafd;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

.accent-background {
  --background-color: #2487ce;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: #469fdf;
  --contrast-color: #ffffff;
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
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);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; /* Corrected line */
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

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

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

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

.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(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

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

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

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

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

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

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

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

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  background-color: var(--background-color); /* මෙම පේළිය අලුතින් එකතු කරන්න */
  border-color: var(--contrast-color); /* මෙය border-bottom-color: var(--contrast-color); ලෙස වෙනස් කිරීම වඩා සුදුසු විය හැක */
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# 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 rgba(0, 0, 0, 0.1);
  }

  .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;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

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

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

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

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

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

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

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.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: 4px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 10px;
  transition: 0.3s;
}

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

.footer .social-links i {
  font-size: 18px;
  line-height: 0;
}

.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: var(--accent-color);
  color: var(--contrast-color);
}

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

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

.footer .credits a {
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}

/*--------------------------------------------------------------
# Preloader - Spinning Border Animation (Theme Colors)
--------------------------------------------------------------*/
#preloader {
  position: fixed; /* තිරයේ එක තැනක සිටීමට */
  inset: 0; /* සම්පූර්ණ තිරය ආවරණය කිරීමට */
  z-index: 999999; /* අනෙකුත් elements වලට වඩා ඉදිරියෙන් පෙන්වීමට */
  overflow: hidden; /* පිටතට යන කොටස් සැඟවීමට */
  background: var(--background-color); /* ඔබේ theme එකේ background color එක යොදාගන්න */
  transition: all 0.6s ease-out; /* සුමටව අතුරුදහන් වීම සඳහා */

  /* loader එක තිරයේ මැදට සිටීම සඳහා */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* පෙර තිබූ අනෙකුත් loader styles සහ keyframes මෙතැනින් ඉවත් කර ඇත */

/* නව Loader Animation Styles (ඔබ ලබා දුන් code එක, වර්ණ වෙනස් කර ඇත) */
.loader {
  width: 48px; /* loader එකේ පළල */
  height: 48px; /* loader එකේ උස */
  border-radius: 50%; /* රවුම් හැඩය */
  display: inline-block;
  /* වර්ණය වෙනස් කර ඇත - ඔබේ default text color එක */
  border-top: 4px solid var(--default-color);
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite; /* animation 1 - වේගය 1s */
}

.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px; /* pseudo element එකේ පළල */
  height: 48px; /* pseudo element එකේ උස */
  border-radius: 50%;
  /* වර්ණය වෙනස් කර ඇත - ඔබේ theme accent color එක */
  border-left: 4px solid var(--accent-color);
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse; /* animation 2 - වේගය 0.5s, ප්‍රතිලෝමව */
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* @keyframes blink animation එක මෙතැනින් සම්පූර්ණයෙන් ඉවත් කර ඇත */

/*--------------------------------------------------------------
# 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);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

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

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

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

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 100px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 60px 0;
  overflow: hidden;
}

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

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

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

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

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

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

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

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 5px;
  transition: 0.3s;
  margin-top: 30px;
}

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

.hero .icon-box {
  background-color: var(--surface-color);
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.hero .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.hero .icon-box .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.hero .icon-box .description {
  font-size: 15px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.hero .icon-box .icon {
  margin: 0 auto; /* Centered icon */
  width: 100px; /* Consistent size */
  height: 100px; /* Consistent size */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
  font-size: 36px;
  line-height: 1;
  color: var(--accent-color);
}

.hero .icon-box:hover {
  transform: scale(1.08);
}

.hero .icon-box:hover .title a {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
# 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 {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-color); /* About button border */
}

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

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%); /* About button border hover */
}

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

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  padding: 30px 0;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/* Existing about-alt styles remain unchanged */
.about-alt .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

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

.about-alt .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about-alt .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

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

.about-alt .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/* New read-more-alt button for about-alt section */
.about-alt .read-more-alt {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

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

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

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid var(--background-color);
}

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

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

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

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

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

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

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

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

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

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

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .service-item .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

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

.services .service-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

.services .service-item.item-cyan i {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover .icon i {
  color: #fff;
}

.services .service-item.item-cyan:hover .icon path {
  fill: #0dcaf0;
}

.services .service-item.item-orange i {
  color: #fd7e14;
}

.services .service-item.item-orange:hover .icon i {
  color: #fff;
}

.services .service-item.item-orange:hover .icon path {
  fill: #fd7e14;
}

.services .service-item.item-teal i {
  color: #20c997;
}

.services .service-item.item-teal:hover .icon i {
  color: #fff;
}

.services .service-item.item-teal:hover .icon path {
  fill: #20c997;
}

.services .service-item.item-red i {
  color: #df1529;
}

.services .service-item.item-red:hover .icon i {
  color: #fff;
}

.services .service-item.item-red:hover .icon path {
  fill: #df1529;
}

.services .service-item.item-indigo i {
  color: #6610f2;
}

.services .service-item.item-indigo:hover .icon i {
  color: #fff;
}

.services .service-item.item-indigo:hover .icon path {
  fill: #6610f2;
}

.services .service-item.item-pink i {
  color: #f3268c;
}

.services .service-item.item-pink:hover .icon i {
  color: #fff;
}

.services .service-item.item-pink:hover .icon path {
  fill: #f3268c;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

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

.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: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

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

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  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(--accent-color);
}

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Portfolio Section හි View More බොත්තම සඳහා Style
--------------------------------------------------------------*/
.portfolio .view-more {
  background: var(--accent-color); /* theme එකේ ප්‍රධාන වර්ණය පසුබිම ලෙස යොදයි */
  color: var(--contrast-color); /* theme එකේ අකුරු වලට ගැලපෙන වර්ණය (සාමාන්‍යයෙන් සුදු) යොදයි */
  font-family: var(--heading-font); /* theme එකේ heading font එක යොදයි */
  font-weight: 500; /* අකුරු වල ඝනකම (font weight) */
  font-size: 16px; /* අකුරු ප්‍රමාණය */
  letter-spacing: 1px; /* අකුරු අතර පරතරය */
  padding: 10px 28px; /* බොත්තම ඇතුලත padding */
  border-radius: 5px; /* බොත්තමේ කොන් වක්‍ර කිරීම */
  transition: 0.3s; /* hover effect එක සඳහා animation කාලය */
  display: inline-flex; /* අන්තර්ගතය (text සහ icon) inline flexbox ලෙස පෙළගැස්වීම */
  align-items: center; /* සිරස් අතට මධ්‍යගත කිරීම */
  justify-content: center; /* තිරස් අතට මධ්‍යගත කිරීම (අවශ්‍ය නම්) */
  border: 2px solid var(--accent-color); /* බොත්තම වටා theme වර්ණයෙන් border එකක් */
}


.portfolio .view-more i {
  font-size: 18px; /* icon එකේ ප්‍රමාණය */
  margin-left: 5px; /* icon එකට වමට ඉඩක් තැබීම */
  line-height: 0; /* icon එක පෙළගැස්වීම සඳහා */
  transition: 0.3s; /* hover effect එක සඳහා animation කාලය */
}


.portfolio .view-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%); /* hover කල විට පසුබිම් වර්ණය තරමක් විනිවිදභාවයෙන් අඩු කිරීම */
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%); /* hover කල විට border වර්ණය වෙනස් කිරීම */
  color: var(--contrast-color); /* hover කල විට අකුරු වර්ණය එලෙසම තබා ගැනීම */
}


.portfolio .view-more:hover i {
  transform: translate(5px, 0); /* hover කල විට icon එක දකුණට මදක් චලනය කිරීම */
}

/*--------------------------------------------------------------
# Portfolio Section Styles
--------------------------------------------------------------*/
/* Portfolio filters (category buttons) සඳහා styles */
.portfolio .portfolio-filters {
  padding: 0; /* default padding ඉවත් කරයි */
  margin: 0 auto 20px auto; /* මධ්‍යගත කර පහලින් ඉඩක් තබයි */
  list-style: none; /* list item bullets ඉවත් කරයි */
  text-align: center; /* බොත්තම් මධ්‍යගත කරයි */
}

/* එක් එක් filter button (li) සඳහා styles */
.portfolio .portfolio-filters li {
  cursor: pointer; /* cursor එක pointer එකක් ලෙස පෙන්වයි */
  display: inline-block; /* බොත්තම් එක පේලියට පෙන්වයි */
  padding: 8px 20px 10px 20px; /* බොත්තම ඇතුලත padding */
  margin: 0 5px 5px 5px; /* බොත්තම් අතර පරතරය */
  font-size: 15px; /* අකුරු ප්‍රමාණය */
  font-weight: 600; /* අකුරු වල ඝනකම */
  line-height: 1; /* line height එක */
  border-radius: 50px; /* බොත්තමේ කොන් වක්‍ර කර රවුම් හැඩයක් ලබා දෙයි */
  transition: all 0.3s ease-in-out; /* animation සඳහා transition */
  font-family: var(--heading-font); /* theme එකේ heading font එක යොදයි */
  color: var(--default-color); /* default අකුරු වර්ණය */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); /* default border එක */
}

/* filter button එක මත hover කල විට සහ active (තෝරාගත්) විට styles */
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color); /* theme එකේ ප්‍රධාන වර්ණය අකුරු වලට යොදයි */
  border-color: var(--accent-color); /* theme එකේ ප්‍රධාන වර්ණය border එකට යොදයි */
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%); /* පසුබිම් වර්ණය තරමක් විනිවිදභාවයෙන් අඩු කරයි */
}

/* පළමු filter button එකේ වම් margin එක ඉවත් කරයි */
.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

/* අවසාන filter button එකේ දකුණු margin එක ඉවත් කරයි */
.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

/* කුඩා තිර සඳහා filter buttons styles */
@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px; /* අකුරු ප්‍රමාණය අඩු කරයි */
    margin: 0 0 10px 0; /* බොත්තම් අතර පරතරය වෙනස් කරයි */
  }
}

/* එක් එක් portfolio item එක සඳහා styles */
.portfolio .portfolio-item {
  position: relative; /* overlay එක සඳහා relative position එකක් ලබා දෙයි */
  overflow: hidden; /* item එකෙන් පිට යන කොටස් සැඟවීමට */
  border-radius: 5px; /* කොන් වක්‍ර කිරීම */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* මදක් shadow එකක් එක් කරයි */
  transition: all 0.3s ease-in-out; /* hover animation සඳහා */
}

/* Portfolio item එක මත hover කල විට styles */
.portfolio .portfolio-item:hover {
    transform: translateY(-5px); /* hover කල විට මදක් ඉහලට චලනය වේ */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* shadow එක වැඩි කරයි */
}


/* Portfolio item එක මත hover කල විට දිස්වන overlay (info) එක සඳහා styles */
.portfolio .portfolio-item .portfolio-info {
  opacity: 0; /* මුලින් overlay එක නොපෙන්වයි */
  position: absolute; /* image එක මත පිහිටීම සඳහා */
  left: 0; /* වම් කෙලවරට පෙළගස්වයි */
  right: 0; /* දකුණු කෙලවරට පෙළගස්වයි */
  bottom: 0; /* පහල කෙලවරට පෙළගස්වයි */
  top: 0; /* ඉහල කෙලවරට පෙළගස්වයි - සම්පූර්ණ image එකම ආවරණය කරයි */
  z-index: 2; /* image එකට ඉහලින් පෙන්වයි */
  transition: all ease-in-out 0.4s; /* animation සඳහා transition */
  background: color-mix(in srgb, var(--background-color), transparent 30%); /* පසුබිම් වර්ණය (theme background color එකේ විනිවිදභාවය අඩු කර) යොදයි */
  padding: 15px; /* overlay එක ඇතුලත padding */
  display: flex; /* අන්තර්ගතය (title, category, icons) පෙළගැස්වීම සඳහා */
  flex-direction: column; /* අන්තර්ගතය සිරස් අතට පෙළගස්වයි */
  justify-content: flex-end; /* අන්තර්ගතය පහලට පෙළගස්වයි */
  align-items: flex-start; /* අන්තර්ගතය වමට පෙළගස්වයි */
}

/* Portfolio item එක මත hover කල විට overlay එක පෙන්වයි */
.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1; /* overlay එක පෙන්වයි */
}


/* Portfolio item එකේ title (h4) සඳහා styles */
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px; /* අකුරු ප්‍රමාණය */
  font-weight: 600; /* අකුරු වල ඝනකම */
  color: var(--heading-color); /* theme එකේ heading color එක යොදයි */
  margin-bottom: 5px; /* පහලින් ඉඩක් තබයි */
}

/* Portfolio item එකේ category (p) සඳහා styles */
.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%); /* අකුරු වර්ණය (theme default color එකේ විනිවිදභාවය අඩු කර) යොදයි */
  font-size: 14px; /* අකුරු ප්‍රමාණය */
  margin-bottom: 10px; /* පහලින් ඉඩක් තබයි */
}

/* Preview සහ Details links (icons) අඩංගු div එක */
.portfolio .portfolio-info .links {
    margin-top: auto; /* අන්තර්ගතය පහලට තල්ලු කරයි */
    display: flex; /* icons පෙළගැස්වීම සඳහා */
    gap: 10px; /* icons අතර පරතරය */
}


/* Preview link (zoom icon) සහ Details link (link icon) සඳහා styles */
.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  font-size: 24px; /* icon ප්‍රමාණය */
  color: color-mix(in srgb, var(--default-color), transparent 40%); /* icon වර්ණය */
  transition: 0.3s; /* hover animation සඳහා */
  line-height: 0; /* පෙළගැස්වීම සඳහා */
  display: flex; /* icon එක මධ්‍යගත කිරීමට */
  align-items: center; /* සිරස් අතට මධ්‍යගත කිරීමට */
  justify-content: center; /* තිරස් අතට මධ්‍යගත කිරීමට */
  background-color: color-mix(in srgb, var(--surface-color), transparent 20%); /* මදක් විනිවිද පෙනෙන පසුබිමක් */
  width: 36px; /* icon background එකේ පළල */
  height: 36px; /* icon background එකේ උස */
  border-radius: 50%; /* රවුම් හැඩය */
}

/* Preview සහ Details links මත hover කල විට styles */
.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--contrast-color); /* theme එකේ contrast color එක යොදයි (සාමාන්‍යයෙන් සුදු) */
  background-color: var(--accent-color); /* theme එකේ ප්‍රධාන වර්ණය පසුබිමට යොදයි */
}

/* Details link එක සඳහා විශේෂ styles (අවශ්‍ය නම්) */
/* .portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
} */

/*
   සටහන: ඔබගේ index.html හි ඇති portfolio section එකේ CSS styles
   මෙම styles වලට සමාන විය හැක. එසේනම්, මෙම කේතය
   main.css ගොනුවට එක් කිරීමේදී දැනට පවතින styles
   අනුව වෙනස්කම් සිදු කිරීමට හෝ අනුපිටපත් ඉවත් කිරීමට
   සිදු විය හැකිය.
*/




/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

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

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

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

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

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
  border-radius: 5px; /* Added border-radius for consistency */
  transition: all 0.3s ease-in-out; /* Added transition for smooth animation */
}

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

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

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

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  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: color-mix(in srgb, var(--default-color), transparent 40%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
}

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

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

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

.pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/* Added hover effect for pricing items - Changed to use scale */
.pricing .pricing-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1); /* Keep the shadow effect */
  transform: scale(1.05); /* Added scale transform for a more noticeable effect */
}

/* Ensure the featured item's transform is not overridden by the general hover */
@media (min-width: 992px) {
    .pricing .featured .pricing-item:hover {
       /* Combine featured transform and the new scale transform */
       /* Note: Order of transforms can matter, scale first then the featured transform */
       transform: scale(1.05) scale(1.02, 1.1);
       /* Alternatively, calculate the combined scale if needed, but this should work */
    }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

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

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

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

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

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

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

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

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

.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

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

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

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

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  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;
  opacity: 0.7; /* Added opacity for fade effect */
  transition: opacity 0.3s ease-in-out; /* Added transition for smooth fade */
}

.contact .php-email-form {
  height: 100%;
}

.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 input[type=tel]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

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

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

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

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

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

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

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

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

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

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

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

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

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  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
--------------------------------------------------------------*/


/* Typewriter effect styles */
/* Cursor for typewriter effect */
.typed-cursor {
  opacity: 1;
  animation: blink .70s infinite;
  /* Optional: Adjust color to match your heading */
  color: var(--heading-color);
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/*--------------------------------------------------------------
# Order Form Section (Optional Styles)
--------------------------------------------------------------*/
.order-form-section .form-label {
  font-weight: 600;
  color: var(--heading-color); /* Labels වලට Heading color එක යොදන්න */
  margin-bottom: 8px;
}

.order-form-section .form-control,
.order-form-section .form-select {
  /* Contact form එකේ styles වලට අමතරව අවශ්‍ය වෙනස්කම් මෙහි එකතු කරන්න */
  /* උදා: border-radius, padding වැඩි කිරීම */
   border-radius: 4px;
}

.order-form-section .form-text {
    font-size: 0.875em; /* Small text size */
    color: color-mix(in srgb, var(--default-color), transparent 80%); /* Muted color */
    margin-top: 4px;
    display: block; /* Ensure it takes its own line */
}


/* ඔබට file input එකට විශේෂ style අවශ්‍ය නම් */
.order-form-section input[type="file"] {
    padding: 10px 15px; /* Adjust padding as needed */
    /* Add any other specific file input styles here */
}

/* ඔබට select box එකට විශේෂ style අවශ්‍ය නම් */
.order-form-section select.form-select {
     padding: 10px 25px 10px 15px; /* Adjust padding for dropdown arrow */
     /* Add any other specific select styles here */
}


/* Updated style for the Submit Order button to match the Read More button */
.order-form-section button[type="submit"] {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500; /* Adjusted font weight */
  font-size: 16px; /* Adjusted font size */
  letter-spacing: 1px; /* Added letter spacing */
  display: inline-flex; /* Changed display to match read-more */
  align-items: center;
  justify-content: center;
  padding: 10px 28px; /* Adjusted padding */
  border-radius: 5px; /* Adjusted border radius */
  transition: 0.3s;
  border: none; /* Ensure no default button border */
}

.order-form-section button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
  color: var(--contrast-color); /* Ensure text color remains high contrast on hover */
}

/*--------------------------------------------------------------
# Educational Articles Section
--------------------------------------------------------------*/
.educational-articles .educational-article {
  background-color: var(--surface-color);
  padding: 20px;
  margin-bottom: 30px; /* Space between articles */
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  height: 100%; /* Ensure equal height if content varies */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack content vertically */
}

.educational-articles .educational-article .row {
    align-items: center; /* Vertically align image and text */
}

.educational-articles .educational-article img {
  border-radius: 4px;
  margin-bottom: 15px; /* Space below image on small screens */
}

@media (min-width: 768px) {
    .educational-articles .educational-article img {
        margin-bottom: 0; /* Remove bottom margin on larger screens */
    }
}


.educational-articles .educational-article h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.educational-articles .educational-article p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--default-color);
  margin-bottom: 0; /* Remove default paragraph bottom margin */
}

/* Style for the buttons section */
.educational-articles .text-center .btn {
    /* Inherits styles from Bootstrap .btn and your theme's button styles */
    /* Add any specific adjustments for these buttons here if needed */
    margin-top: 15px; /* Space above buttons */
}

/* Optional: Style for the button icons */
.educational-articles .btn i {
    vertical-align: middle; /* Align icon vertically with text */
}



/* Style for the Ad Banner Section - No Padding */
/* මෙම style මගින් banner එක අඩංගු සම්පූර්ණ කොටස සකසයි */
.ad-banner-section {
  padding: 0 !important; /* ඉහල සහ පහල padding සම්පූර්ණයෙන්ම ඉවත් කරයි */
  text-align: center; /* Container එක තුල ඇති අන්තර්ගතය (Banner Container එක) තිරස් අතට මධ්‍යගත කිරීමට උත්සාහ කරයි */
  background-color: var(--background-color); /* කොටසේ පසුබිම් වර්ණය */
  overflow: hidden; /* මෙම section එකෙන් පිට යන දේවල් සැඟවීමට */
  margin: 0 !important; /* ආරක්ෂිත හේතූන් මත margin ද 0 ලෙස සකසමු */
}

/* Style for the Ad Banner Container - Full Width of Container and Centered */
/* මෙම style මගින් Banner Image එක අඩංගු වන කොටුව (Container) සකසයි */
.ad-banner-container {
  display: inline-block; /* Container එක inline-block element එකක් ලෙස සකසයි. text-align: center; සමග මධ්‍යගත වීමට මෙය උපකාරී විය හැකියි. */
  width: 100%; /* Container එකේ ඇති parent Container එකේ (.container) සම්පූර්ණ පළල ගැනීමට */
  height: auto; /* උස ස්වයංක්‍රීයව පිංතූරයට අනුව සකස් වීමට */
  /* max-height: 90px; // මෙම පේලිය ඉවත් කර ඇත */
  margin: 0 auto !important; /* Banner Container එක තිරස් අතට මධ්‍යගත කිරීමට. !important යොදා ඇත. */
  overflow: hidden; /* Container එකෙන් පිට යන පිංතූර කොටස් සැඟවීමට */

  /* ඔබට අවශ්‍ය නම් Border එකතු කරන්න */
  /* border: 1px solid #ccc; */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

/* Style for the Ad Banner Image - Ensures the image fits within the container */
/* මෙම style මගින් Banner පිංතූරය (<img> tag එක) සකසයි */
.ad-banner-container img {
  display: block; /* පිංතූරය block element එකක් ලෙස සකසයි. */
  width: 100%; /* පිංතූරය එහි ඇති Container එකේ (.ad-banner-container) පළලින් 100% ක් ගැනීමට */
  height: auto; /* උස ස්වයංක්‍රීයව සකස් වීමට */
  object-fit: contain; /* පිංතූරයේ අනුපාතය විකෘති නොවී, Container එක පුරා පෙන්වීමට. මෙය 'cover' වෙනුවට යොදා ඇත. */
}

/* කුඩා තිර සඳහා Styles (Mobile Responsiveness) */
/* කුඩා තිර සඳහා object-fit: contain; දැනටමත් තිබූ නිසා මෙහි විශාල වෙනසක් සිදු නොවේ */
@media (max-width: 767.98px) { /* Browser window එකේ පළල pixels 767.98 ට වඩා අඩු වූ විට මෙම styles ක්‍රියාත්මක වේ. */
  .ad-banner-container {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: auto;
    margin: 0 auto !important; /* කුඩා තිර වලදී ද මධ්‍යගත කිරීම */
  }

  .ad-banner-container img {
      height: auto;
      object-fit: contain; /* කුඩා තිර වලදී පිංතූරය කපී යාම වැලැක්වීමට 'contain' භාවිතා කරයි. */
  }
}

/* ඔබට අවශ්‍ය නම් ඉතා කුඩා තිර වලදී Banner එක සම්පූර්ණයෙන්ම නොපෙන්වීමට */
/* පහත media query එක uncomment කර භාවිතා කළ හැකියි */
/*
@media (max-width: 575.98px) { // Browser window එකේ පළල pixels 575.98 ට වඩා අඩු වූ විට
  .ad-banner-section {
    display: none !important; // Banner Section එක සම්පූර්ණයෙන්ම සඟවයි
  }
}
*/


/* Style for About Section - Removed Top Padding */
/* About Us Section එකේ ඉහලින් ඇති හිස් ඉඩ අඩු කිරීමට */
#about.section {
    padding-top: 60px; /* ඉහල padding අගය සම්පූර්ණයෙන්ම ඉවත් කරන්න. */
    /* ඔබට අවශය නම් පහල padding ද වෙනස් කළ හැකියි */
    /* padding-bottom: 60px; */
    /* අනෙකුත් styles එලෙසම තබා ගන්න */
}

/* Style for Hero Section - Removed Bottom Padding */
/* Banner එකට ඉහලින් ඇති Hero Section එකේ පහල padding ඉවත් කිරීමට */
#hero.section {
   /* Hero section එකට දැනට ඇති අනෙකුත් styles */
   padding-bottom: 40px; /* පහල padding අගය සම්පූර්ණයෙන්ම ඉවත් කරන්න. */
   /* ඔබට අවශය නම් ඉහල padding ද වෙනස් කළ හැකියි */
   /* padding-top: 60px; */
}


.number-plus::after {
  content: "+";
}

/*--------------------------------------------------------------
# Dark Mode Styles
--------------------------------------------------------------*/
/* body ට dark-mode class එක එකතු වූ විට ක්‍රියාත්මක වන styles */
body.dark-mode {
  --background-color: #1a1a1a;
  --default-color: #e0e0e0;
  --heading-color: #ffffff;
  --surface-color: #2c2c2c;

  --nav-mobile-background-color: #1a1a1a;
  --nav-dropdown-background-color: #2c2c2c;
  --nav-dropdown-color: #e0e0e0;
  --nav-dropdown-hover-color: var(--accent-color);
}

/* Dark mode එකේදී header එක scroll කළ විට පෙනුම */
.dark-mode .scrolled .header {
  background-color: rgba(26, 26, 26, 0.9);
  border-bottom-color: #333;
}

/* Testimonials වැනි කොටස් වල පසුබිම් වර්ණය වෙනස් කිරීම */
body.dark-mode .testimonials .testimonial-item p {
  background: #2c2c2c;
}

/* FAQ කොටසේ background වර්ණය */
body.dark-mode .faq .faq-container .faq-item {
    background-color: var(--surface-color);
    border-color: #444;
}

/* Contact form එකේ input fields වල පෙනුම */
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 input[type=tel],
body.dark-mode .contact .php-email-form textarea {
  background-color: #2c2c2c;
  border-color: #444;
  color: #ffffff;
}

/*--------------------------------------------------------------
# Dark Mode Toggle Button
--------------------------------------------------------------*/
.dark-mode-toggle {
  position: fixed;
  z-index: 9999;
  top: 19px;
  right: 20px;
  width: 42px;
  height: 42px;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: color-mix(in srgb, var(--surface-color), #000 10%);
}

.dark-mode-toggle .bi-moon-stars,
.dark-mode-toggle .bi-sun {
  font-size: 20px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

/* Light mode එකේදී moon icon එක පෙන්වීම */
.dark-mode .dark-mode-toggle .bi-moon-stars {
  display: none;
}
.dark-mode-toggle .bi-sun {
  display: none;
}
.dark-mode .dark-mode-toggle .bi-sun {
  display: block;
}
.dark-mode-toggle .bi-moon-stars {
  display: block;
}

/* === ජංගම දුරකථන සඳහා Dark Mode Toggle එක සකස් කිරීම (මෙම කොටස අලුතින් එක් කරන්න) === */
@media (max-width: 1199px) {
  .dark-mode-toggle {
    top: 15px; /* ඉහළට ඇති දුර අවශ්‍ය නම් සකසන්න */
    right: 65px; /* මෙනු බොත්තමට ඉඩ දීමට දකුණු පසට ඇති දුර වැඩි කිරීම */
    /* width: 40px; */ /* අවශ්‍ය නම් ප්‍රමාණය වෙනස් කරන්න */
    /* height: 40px; */ /* අවශ්‍ය නම් ප්‍රමාණය වෙනස් කරන්න */
  }
}
/*--------------------------------------------------------------
# Dark Mode Styles
--------------------------------------------------------------*/
/* ... ඔබ කලින් එකතු කළ dark mode styles මෙතන තියෙන්න ඕන ... */


/* --- මෙතනින් පහළට අලුතින් එකතු කරන්න --- */

/* light-background class එක ඇති sections dark mode එකේදී වෙනස් කිරීමට */
body.dark-mode .light-background {
  --background-color: #222425; /* ප්‍රධාන පසුබිමට වඩා මදක් වෙනස් අඳුරු පැහැයක් */
  --surface-color: #2c2c2c;
  --default-color: #e0e0e0;
  --heading-color: #ffffff;
}

/* Accent background එක dark mode එකේදී වෙනස් කිරීමට (අවශ්‍ය නම්) */
body.dark-mode .accent-background {
  --background-color: #1f73b1; /* Accent color එකේ මදක් අඳුරු shade එකක් */
}

/* --- Dark Mode Styles for Buy, Get Ad, Get Plan Pages --- */

/* Page backgrounds for form pages */
body.dark-mode .order-page, /* For buy.html, get-plan.html */
body.dark-mode .starter-page-page { /* For get-ad.html */
  background-color: var(--background-color);
}

/* Form container backgrounds and text colors */
body.dark-mode .order-form-container, /* For buy.html, get-plan.html */
body.dark-mode .form-container-card { /* For get-ad.html */
  background-color: var(--surface-color) !important; /* Override inline #ffffff if present */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #444; /* Darker border for containers */
}

body.dark-mode .order-form-container h2,
body.dark-mode .form-container-card h2 {
  color: var(--heading-color);
}

body.dark-mode .order-form-container label,
body.dark-mode .form-container-card .form-label,
body.dark-mode .order-form-container .form-text.text-muted { /* Target smaller descriptive text as well */
  color: var(--default-color);
}

/* Input, select, and textarea styles for form containers */
body.dark-mode .order-form-container .form-control,
body.dark-mode .order-form-container select.form-control,
body.dark-mode .form-container-card .form-control,
body.dark-mode .form-container-card .form-select {
  background-color: #3a3a3a; /* Darker input background */
  border-color: #555; /* Darker border for inputs */
  color: #ffffff; /* White text for inputs */
}

/* Custom dropdown arrow for buy.html/get-plan.html select in dark mode */
body.dark-mode .order-form-container select.form-control {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.362%22%20height%3D%22292.362%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287.9%20139.769L146.13%20281.539C144.053%20283.616%20141.333%20284.655%20138.613%20284.655c-2.72%200-5.44-1.039-7.517-3.115L4.46%20139.769c-4.237-4.237-4.237-11.104%200-15.342l14.13-14.13c4.237-4.237%2011.104-4.237%2015.341%200L138.613%20221.2l104.55-104.551c4.237-4.237%2011.104-4.237%2015.341%200l14.13%2014.13c4.237%204.237%204.237%2011.104%200%2015.342z%22%2F%3E%3C%2Fsvg%3E'); /* Light grey arrow for dark mode */
}

/* Placeholder text color for form inputs */
body.dark-mode .order-form-container .form-control::placeholder,
body.dark-mode .form-container-card .form-control::placeholder,
body.dark-mode .order-form-container .php-email-form input[type=text]::placeholder, /* From original contact form */
body.dark-mode .order-form-container .php-email-form input[type=email]::placeholder,
body.dark-mode .order-form-container .php-email-form input[type=tel]::placeholder,
body.dark-mode .order-form-container .php-email-form textarea::placeholder,
body.dark-mode .form-container-card .php-email-form input[type=text]::placeholder,
body.dark-mode .form-container-card .php-email-form input[type=email]::placeholder,
body.dark-mode .form-container-card .php-email-form input[type=tel]::placeholder,
body.dark-mode .form-container-card .php-email-form textarea::placeholder {
  color: #aaa; /* Lighter placeholder text */
}

/* Dark mode for submit buttons on form pages */
body.dark-mode .order-form-container button[type="submit"], /* buy.html, get-plan.html */
body.dark-mode .form-container-card .btn-submit { /* get-ad.html */
    /* Buttons generally use accent-color, ensure hover is also adjusted if needed */
}

body.dark-mode .order-form-container button[type="submit"]:hover,
body.dark-mode .form-container-card .btn-submit:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 20%) !important; /* Darken accent color on hover */
}

/* Dark mode for page title section with accent-background on form pages */
body.dark-mode .page-title.accent-background {
    background-color: #1f73b1 !important; /* Darker shade of original accent, ensure override */
    /* --default-color and --heading-color from .accent-background are already white, which is good for dark mode */
}

body.dark-mode .page-title.accent-background h1,
body.dark-mode .page-title.accent-background .breadcrumbs ol {
    color: var(--heading-color); /* Ensure heading and breadcrumbs text uses the (now white) heading color */
}

body.dark-mode .page-title.accent-background .breadcrumbs ol a {
    color: color-mix(in srgb, var(--heading-color), transparent 30%); /* Slightly transparent white for links */
}

body.dark-mode .page-title.accent-background .breadcrumbs ol li+li::before {
    color: color-mix(in srgb, var(--heading-color), transparent 70%); /* More transparent white for separator */
}

/* Styles for .php-email-form inputs inside specific form containers in dark mode */
/* This ensures that if these forms also use .php-email-form class, their inputs are styled */
body.dark-mode .order-form-container .php-email-form input[type=text],
body.dark-mode .order-form-container .php-email-form input[type=email],
body.dark-mode .order-form-container .php-email-form input[type=tel],
body.dark-mode .order-form-container .php-email-form input[type=date], /* Added date type if used */
body.dark-mode .order-form-container .php-email-form select,
body.dark-mode .order-form-container .php-email-form textarea,
body.dark-mode .form-container-card .php-email-form input[type=text],
body.dark-mode .form-container-card .php-email-form input[type=email],
body.dark-mode .form-container-card .php-email-form input[type=tel],
body.dark-mode .form-container-card .php-email-form input[type=date], /* Added date type if used */
body.dark-mode .form-container-card .php-email-form select,
body.dark-mode .form-container-card .php-email-form textarea {
  background-color: #3a3a3a; /* Match general form control dark style */
  border-color: #555; /* Match general form control dark style */
  color: #ffffff; /* Match general form control dark style */
}

/* Ensure general dark mode styles for .light-background and .accent-background are present */
/* (මෙම කොටස් ඔබගේ main.css ගොනුවේ අවසානයේ දැනටමත් තිබිය යුතුය, ඒවා නිවැරදි දැයි තහවුරු කරගන්න) */
body.dark-mode .light-background {
  --background-color: #222425;
  --surface-color: #2c2c2c;
  --default-color: #e0e0e0;
  --heading-color: #ffffff;
}

body.dark-mode .accent-background {
  /* This is general. For .page-title.accent-background, a more specific rule is used above. */
  /* If .accent-background is used on other elements, this will apply. */
  /* --background-color: #1f73b1; */ /* Consider if this general rule is needed or if specific overrides are better */
}


/* Custom Styles for New Portfolio Carousels in portfolio-new section */
.portfolio-new .swiper-button-next,
.portfolio-new .swiper-button-prev {
  color: var(--accent-color); /* Default icon color */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background for arrows */
  border-radius: 50%;
  width: 38px; /* Adjust size */
  height: 38px;
  line-height: 38px; /* Center icon */
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.portfolio-new .swiper-button-next:hover,
.portfolio-new .swiper-button-prev:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color); /* Icon color on hover */
}

.portfolio-new .swiper-button-next::after,
.portfolio-new .swiper-button-prev::after {
  font-size: 16px; /* Adjust icon size */
  font-weight: bold;
}

/* Positioning arrows outside, adjust as needed */
.portfolio-new .swiper-button-prev {
  left: -5px;
}
.portfolio-new .swiper-button-next {
  right: -5px;
}
@media (max-width: 767px) {
  .portfolio-new .swiper-button-prev {
    left: 5px; /* Adjust for smaller screens if they overlap */
  }
  .portfolio-new .swiper-button-next {
    right: 5px; /* Adjust for smaller screens */
  }
}


.portfolio-new .swiper-pagination {
  position: relative; /* Default static positioning */
  bottom: auto; /* Reset bottom positioning if any from other swipers */
  padding-top: 10px; /* Space between swiper and dots */
}

.portfolio-new .swiper-pagination .swiper-pagination-bullet {
  width: 10px; /* Adjust size */
  height: 10px;
  background-color: #ddd; /* Inactive dot color (light grey) */
  opacity: 1;
  border: 1px solid var(--accent-color); /* Optional border for inactive */
  margin: 0 5px !important; /* Spacing between dots */
  transition: background-color 0.3s ease;
}

.portfolio-new .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color); /* Active dot color */
  border-color: var(--accent-color);
}

.portfolio-new .portfolio-category-caption h5 {
  margin-top: 8px; /* Space above caption, adjust from default 10px if needed */
  font-size: 1rem; /* Caption font size (Bootstrap h5 is usually 1.25rem, this makes it smaller) */
  color: var(--default-color); /* More subtle color for caption */
  font-weight: 500; /* Medium weight */
}

/* Ensure portfolio items within the carousel are styled well */
.portfolio-new .portfolio-carousel-item-wrapper .portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 5px; /* Add some rounding to the item container */
  box-shadow: 0 0 15px rgba(0,0,0,0.07); /* Subtle shadow */
}

.portfolio-new .portfolio-carousel-item-wrapper .portfolio-item img {
  width: 100%;
  height: 250px; /* Or a fixed height or use aspect-ratio */
  object-fit: cover; /* Ensures image covers the area, might crop */
  transition: transform 0.3s ease;
}

/* Hover effect on the image (optional) */
/* .portfolio-new .portfolio-carousel-item-wrapper .portfolio-item:hover img {
  transform: scale(1.05);
} */

/* Adjustments for portfolio-info if needed inside smaller carousel items */
.portfolio-new .portfolio-item .portfolio-info {
  /* Default styles from main.css apply. Add overrides if layout is cramped. */
  /* e.g., padding, font sizes for h4, p inside portfolio-info */
}

/*--------------------------------------------------------------
# Design Prices Page & Order Form Page
--------------------------------------------------------------*/
.design-prices .pricing-item {
  background-color: var(--surface-color);
  padding: 40px 30px; /* Adjusted padding */
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
  border-radius: 8px; /* Consistent border-radius */
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.design-prices .pricing-item h3 {
  font-weight: 600;
  margin-bottom: 10px; /* Adjusted margin */
  font-size: 22px; /* Slightly larger */
}

.design-prices .pricing-item .design-code {
  font-size: 0.9em;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 15px;
}

.design-prices .pricing-item h4 {
  font-size: 42px; /* Adjusted size */
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
  margin-bottom: 20px; /* Added margin */
}

.design-prices .pricing-item h4 sup {
  font-size: 24px; /* Adjusted size */
}

.design-prices .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 16px; /* Adjusted size */
}

.design-prices .pricing-item ul {
  padding: 0; /* Removed default padding */
  list-style: none;
  color: var(--default-color); /* Darker text for better readability */
  text-align: left;
  line-height: 22px; /* Adjusted line height */
  margin-bottom: 25px; /* Added margin */
  flex-grow: 1; /* Allows ul to take available space */
}

.design-prices .pricing-item ul li {
  padding: 8px 0; /* Adjusted padding */
  display: flex;
  align-items: center;
}

.design-prices .pricing-item ul i {
  color: var(--accent-color); /* Use accent color for checks */
  font-size: 20px; /* Adjusted size */
  padding-right: 8px; /* Increased padding */
}

.design-prices .pricing-item .buy-btn {
  color: var(--contrast-color);
  background: var(--accent-color);
  display: inline-block;
  padding: 10px 35px; /* Adjusted padding */
  border-radius: 5px; /* Consistent border-radius */
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  border: 2px solid var(--accent-color); /* Ensure border for consistency */
}

.design-prices .pricing-item .buy-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.design-prices .pricing-item:hover {
  transform: translateY(-5px); /* Subtle hover effect */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

/* Styles for the bottom buttons on prices page */
.design-prices .btn-get-startedราคา,
.design-prices .btn-outline-accentราคา {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  margin: 5px; /* Add some margin for spacing */
}

.design-prices .btn-get-startedราคา {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.design-prices .btn-get-startedราคา:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.design-prices .btn-outline-accentราคา {
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  background: transparent;
}

.design-prices .btn-outline-accentราคา:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}


/* Order Form Page Specific Styles */
.order-form-page .page-title,
.prices-page .page-title { /* Apply to prices page title as well */
  padding: 80px 0 40px 0; /* Adjusted padding */
}


.order-design-form .form-label {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.order-design-form .form-control,
.order-design-form .form-select {
  border-radius: 4px;
  font-size: 15px; /* Match other form inputs */
  padding: 10px 15px;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.order-design-form .form-control:focus,
.order-design-form .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: none; /* Remove default focus shadow */
}

.order-design-form .form-control[readonly] {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%); /* Slightly different for readonly */
  opacity: 0.8;
  cursor: not-allowed;
}

.order-design-form button[type="submit"] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 12px 35px; /* Larger padding */
  transition: 0.4s;
  border-radius: 5px;
  font-weight: 500;
  font-size: 16px;
  font-family: var(--heading-font);
}

.order-design-form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.order-design-form .php-email-form .error-message,
.order-design-form .php-email-form .sent-message {
  margin-top: 15px; /* Ensure space from the button */
}

/* Dark Mode Adjustments for new pages */
body.dark-mode .design-prices .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.2);
}

body.dark-mode .design-prices .pricing-item .design-code {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

body.dark-mode .design-prices .pricing-item ul {
  color: var(--default-color);
}

body.dark-mode .order-design-form .form-control,
body.dark-mode .order-design-form .form-select {
  background-color: #3a3a3a;
  border-color: #555;
  color: #ffffff;
}
body.dark-mode .order-design-form .form-control::placeholder,
body.dark-mode .order-design-form .form-select::placeholder {
  color: #aaa;
}


body.dark-mode .order-design-form .form-control[readonly] {
  background-color: #2c2c2c; /* Darker readonly for dark mode */
  opacity: 0.7;
}

body.dark-mode .design-prices .btn-outline-accentราคา {
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

body.dark-mode .design-prices .btn-outline-accentราคา:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}