@charset "UTF-8";

/*
Style   : BiteBalance CSS (Adapted from MobApp)
Version : 1.1
Author  : Your Name (Adapted from Surjith S M)
URI     : https://surjithctly.in/
Copyright © All rights Reserved 
*/

/*------------------------
[TABLE OF CONTENTS]
1. GLOBAL STYLES
2. NAVBAR
3. HERO
4. FEATURES
5. TABS
6. TESTIMONIALS
7. IMAGE GALLERY
8. PRICING
9. CALL TO ACTION
10. FOOTER
------------------------*/

/* GLOBAL STYLES
----------------------*/
:root {
  /* Dark Theme Base */
  --bg: #0A192F; /* Deep dark blue */
  --bg-light: #13263E; /* Slightly lighter panel, still dark blue */
  --bg-card: #172A45; /* Card backgrounds, slightly distinct */
  --text: #E0E0E0; /* Light grey for primary text */
  --text-muted: #A0AEC0; /* Softer grey for secondary text */
  --card-shadow: rgba(0, 0, 0, 0.4); /* Shadow for dark elements */
  --border-color: #2D3748; /* Border color for elements */

  /* Blue Gradient & Accents */
  --primary-gradient-start: #4A90E2; /* Bright, engaging blue */
  --primary-gradient-mid: #357ABD;   /* Medium blue */
  --primary-gradient-end: #2A65A3;   /* Deeper blue */

  --accent-color: #58A6FF;       /* Vibrant blue for interactive elements, links */
  --accent-color-hover: #79B8FF; /* Lighter blue for hover states */
  --accent-color-darker: #388BF2;/* Darker shade of accent for specific uses */

  --icon-color: var(--accent-color); /* Consistent icon color */
  --headings-color: #CCD6F6; /* Slightly brighter for headings */
}



body {
  font-family: 'Rubik', sans-serif;
  position: relative;
  background-color: var(--bg);
  color: var(--text);
}

a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: var(--accent-color-hover);
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  color: var(--headings-color);
  font-weight: 500; /* Make headings a bit bolder */
}

h1 {
  font-size: 52px; /* Slightly reduced for modern look */
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 0.7rem;
}

p {
  color: var(--text-muted);
  line-height: 1.7;
}

p.lead {
  color: var(--accent-color); /* Using accent for lead paragraphs for emphasis */
  margin-bottom: 2rem;
  font-weight: 400;
}

.text-primary {
  color: var(--accent-color) !important;
}

.light-font {
  font-weight: 300;
}

.btn {
  font-size: 13px;
  font-weight: 500; /* Bolder buttons */
  text-transform: uppercase;
  padding: 0.5rem 1.5rem; /* Slightly larger padding */
  transition: all 0.3s ease;
  border-radius: 5px; /* Softer radius */
  letter-spacing: 0.5px;
}

.btn-outline-light {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-outline-light:hover {
  background-color: var(--accent-color);
  color: var(--bg);
  border-color: var(--accent-color);
}

.btn-primary {
  background-image: linear-gradient(122deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
  box-shadow: 0px 8px 25px var(--card-shadow);
  font-weight: 500;
  padding: 0.75rem 2.25rem; /* More prominent primary buttons */
  border: 0;
  color: #FFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  background-image: linear-gradient(122deg, var(--primary-gradient-mid) 0%, var(--primary-gradient-start) 100%);
  box-shadow: 0px 10px 30px var(--card-shadow);
  color: #FFF;
  transform: translateY(-2px); /* Slight lift on hover */
}

.btn-light {
  background: var(--bg-light);
  box-shadow: 0px 7px 28px 0px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0.5rem;
  padding: 0.7rem 1.6rem;
  line-height: 1.8;
  border: 1px solid var(--border-color);
}
.btn-light:hover {
    background: var(--bg-card);
    color: var(--accent-color-hover);
    border-color: var(--accent-color);
}


.btn-group-lg>.btn,
.btn-lg {
  padding: 0.8rem 1.8rem; /* Consistent large button padding */
  font-size: 16px;
}

.light-bg { /* This class name is now a misnomer, it's a lighter shade of dark */
  background-color: var(--bg-light);
}

.section {
  padding: 80px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 4rem; /* More space for section titles */
}

.section-title small {
  color: var(--accent-color); /* Use accent for the small tag */
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Styles for Header Overlay Download Buttons */

<!-- .img-holder { -->
    <!-- position: relative; /* Crucial for positioning children absolutely */ -->
    <!-- /* Ensure this class has your existing styles like padding-bottom, overflow, margin-top */ -->
    <!-- /* Example from previous step (if you applied it): */ -->
    <!-- /* padding-bottom: 20%; */ -->
<!-- } -->

.img-holder {
height: 0;
/* EVEN MORE REDUCED padding-bottom */
padding-bottom: 15%; /* WAS 20% - Adjust this target value if needed */
overflow: hidden;
margin-top: 2rem; /* Keeps space between text and phone */
position: relative; /* Ensure this is still here for button positioning */
}

@media (max-width:1200px) {
.img-holder {
  /* EVEN MORE REDUCED padding-bottom for this breakpoint */
  padding-bottom: 28%; /* WAS 35% - Adjust as needed */
  /* existing styles like margin-top if any specific to this query */
}
}

@media (max-width:767px) {
/* ... other rules for header etc. ... */
.img-holder {
  /* EVEN MORE REDUCED padding-bottom for mobile */
  padding-bottom: 35%; /* WAS 45% (or 70% originally) - Adjust as needed */
  margin-top: 1rem;
}
/* ... other rules ... */
}

.img-holder img.img-fluid {
  position: relative; /* Helps with stacking context, especially with animations */
  z-index: 1;         /* Ensure image is behind the buttons */
}

.header-download-buttons-container {
  position: absolute;
  bottom: 15px; /* Adjust this value as needed after layout change */
                /* Horizontal buttons might allow this to be slightly smaller if they take less vertical space overall */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center; /* This will center the group of inline-block buttons */
  width: auto; /* Let the container be as wide as its content */
  white-space: nowrap; /* Prevents buttons from wrapping if container gets too narrow before media query kicks in */
}



.btn-header-overlay-download {
  display: inline-block; /* For horizontal layout */
  min-width: 160px;      /* To make buttons the same width - adjust as needed */
  margin: 0 0.5rem;      /* Horizontal margin between buttons */
                          /* Remove 'width', 'max-width' from previous stacking styles */
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary-gradient-end);
  border: none;
  padding: 0.7rem 1.2rem; /* Consistent padding */
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 5px;
  box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  text-align: center; /* Ensures content inside button (icon + text) is centered */
  vertical-align: middle; /* Helps align buttons if their line-heights differ slightly */
}

.btn-header-overlay-download img {
  margin-right: 0.6rem;
  height: 18px;
  vertical-align: middle; /* Crucial for icon alignment with text */
}

.btn-header-overlay-download:hover {
  background: #FFFFFF;
  color: var(--primary-gradient-start);
  transform: translateY(-2px); /* Simple hover effect */
  box-shadow: 0px 7px 22px rgba(0, 0, 0, 0.3);
}

/* Stack buttons on smaller screens (e.g., mobile phones in portrait) */
@media (max-width: 576px) { /* You can adjust this breakpoint (e.g., 767px) */
  .header-download-buttons-container {
      bottom: 10px; /* Adjust vertical position for stacked buttons */
      width: 100%;  /* Allow container to span width for centering block buttons */
      white-space: normal; /* Allow buttons to wrap if they were block (not strictly needed if display:block) */
  }

  .btn-header-overlay-download {
      display: block;       /* Stack them vertically */
      width: 80%;           /* Control width when stacked */
      max-width: 240px;     /* Max width for stacked buttons */
      min-width: 0;         /* Reset min-width from desktop style */
      margin: 0.6rem auto;  /* Center stacked buttons and give vertical space */
      padding: 0.6rem 1rem; /* Slightly adjust padding for smaller buttons */
      font-size: 12px;      /* Slightly adjust font size */
  }

  .btn-header-overlay-download img {
      height: 16px; /* Slightly smaller icons */
  }
}

/* You might still have your @media (max-width: 767px) query for other adjustments.
 If you chose 767px for stacking above, this block would not be needed,
 or it could be used for intermediate states. */
@media (max-width: 767px) {
  /* If not already handled by a smaller breakpoint like 576px: */
  /* Example: If you want slightly larger horizontal buttons here than on very small default */
   .header-download-buttons-container {
      /* Adjust bottom only if needed for this specific breakpoint */
      /* bottom: 12px; */
  }
  /* If stacking at 767px, the 576px styles would not be distinct. Choose one breakpoint for the main stack. */
}

/* You'll still need the other general responsive adjustments for the container from previous answer: */
@media (max-width: 767px) {
  .header-download-buttons-container {
      bottom: 15px;
      /* Other potential general adjustments here if needed */
  }
  /* If global .btn-header-overlay-download styles are good, no need to repeat width/padding
     unless specifically changing them for 767px vs default */
}

.btn-header-overlay-download img {
  margin-right: 0.6rem;
  height: 18px; /* Adjust icon size */
  vertical-align: middle; /* Align icon nicely with text */
}

.btn-header-overlay-download:hover {
  background: #FFFFFF; /* Solid white on hover */
  color: var(--primary-gradient-start); /* Brighter blue text on hover */
  transform: translateY(-2px) translateX(0); /* Ensure translateX from container isn't overridden if combined */
  box-shadow: 0px 7px 22px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments for the overlay buttons */
@media (max-width: 767px) {
  .header-download-buttons-container {
      bottom: 15px; /* Adjust for smaller screens */
      /* If the image area (.img-holder) is significantly shorter on mobile,
         you might need to fine-tune 'bottom' more. */
  }
  .btn-header-overlay-download {
      padding: 0.6rem 1rem;
      font-size: 12px;
      margin: 0 0.2rem; /* Reduce margin slightly */
  }
  .btn-header-overlay-download img {
      height: 16px;
  }
}

@media (max-width: 480px) { /* For very small screens, buttons might need to stack */
  .btn-header-overlay-download {
      display: block; /* Stack the buttons */
      width: 80%;     /* Control width when stacked */
      max-width: 220px; /* Max width for stacked buttons */
      margin: 0.5rem auto; /* Center stacked buttons */
  }
  .header-download-buttons-container {
      /* Adjust bottom if stacking makes the button group taller */
      bottom: 10px;
      width: 100%; /* Ensure container allows for block buttons to center */
  }
}

  @media (max-width:767px) {
    h1 {
      font-size: 38px;
    }
    h2 {
      font-size: 30px;
    }
    .section {
      padding: 60px 0;
    }
    .section-title {
      margin-bottom: 2.5rem;
    }
  }


  /* NAVBAR
  ----------------------*/
  .nav-menu {
    padding: 1rem 0;
    transition: all 0.3s ease;
    background-color: transparent; /* Initially transparent */
  }
  .nav-menu .navbar-brand img {
      max-height: 40px; /* Adjust logo size */
  }

  .nav-menu.is-scrolling,
  .nav-menu.menu-is-open {
    background: linear-gradient(135deg, var(--primary-gradient-end) 0%, var(--primary-gradient-start) 100%);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 0; /* Reduced padding when scrolling */
  }
  
  .navbar-dark .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.85); /* Slightly softer white for nav links */
  }
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link.active {
      color: #FFF; /* Full white on hover/active */
  }


  .navbar-nav .nav-link {
    position: relative;
  }

  @media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-right: 1.2rem; /* More spacing */
      padding-left: 1.2rem;
      font-size: 14px;
      font-weight: 500; /* Bolder nav links */
    }
    .navbar-nav>.nav-item>.nav-link.active:after {
      content: "";
      border-bottom: 3px solid var(--accent-color-hover); /* Thicker, accent underline */
      left: 1.2rem;
      right: 1.2rem;
      bottom: 8px; /* Adjusted position */
      height: 1px;
      position: absolute;
      animation: underline-draw 0.3s ease-out;
    }
  }
  
  @keyframes underline-draw {
      0% { width: 0; }
      100% { width: calc(100% - 2.4rem); } /* Adjust based on padding */
  }


  @media (max-width:991px) {
    .nav-menu.menu-is-open { /* Ensure bg for mobile menu */
      background: linear-gradient(135deg, var(--primary-gradient-end) 0%, var(--primary-gradient-start) 100%);
    }
    .navbar-nav .nav-item {
      text-align: center;
    }
    .navbar-collapse {
        background-color: var(--primary-gradient-mid); /* Mobile menu background */
        padding: 1rem;
        border-radius: 0 0 5px 5px;
    }
  }
  .navbar-dark .navbar-toggler {
      border-color: rgba(255,255,255,0.3);
  }
  .navbar-dark .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }


  /* HERO
  ----------------------*/
  header {
    padding: 120px 0 0; /* More top padding */
    text-align: center;
    color: var(--text); /* Text color already set by body, this is fine */
    overflow: hidden; /* Prevent horizontal scroll from animations if any */
  }

  .bg-gradient { /* For Hero and other gradient sections */
    background-image: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
  }

  header h1 {
      color: #FFF; /* Ensure hero title is bright white on gradient */
  }

  .tagline {
    font-size: 20px; /* Slightly smaller for better readability */
    font-weight: 300;
    color: #E0F2FE; /* Light blue, almost white, for tagline on gradient */
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
  }


/* Ensure any generic styles for images within img-holder are separate */
.img-holder img.img-fluid { /* Generic styles for responsive images in the holder */
  display: block; /* Good practice for images that need layout control */
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

  .img-holder .main-phone-image {
  position: relative; /* For z-index and stacking context */
  z-index: 1;         /* Ensures it's behind the buttons */
  animation: float-phone 6s ease-in-out infinite;
  /* Other img-fluid properties like max-width and height will be inherited
     or you can re-declare them if .img-fluid was removed */
}

  @keyframes float-phone {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
  }






  @media (max-width:1200px) {
    .img-holder {
      /* REDUCED padding-bottom for this breakpoint */
      padding-bottom: 35%; /* WAS 50% - Adjust this value */
    }
  }

  @media (max-width:767px) {
    header {
      padding: 80px 0 0; /* Top padding for header itself */
    }
    .tagline {
      font-size: 17px;
    }
    .img-holder {
      /* REDUCED padding-bottom for mobile */
      padding-bottom: 45%; /* WAS 70% - Adjust this value */
       margin-top: 1rem;
    }
     .img-holder img {
      max-width: 80%;
      margin: 0 auto;
    }
  }

  .client-logos {
      background-color: var(--bg-light); /* Subtle bg for client logos section */
      padding: 40px 0;
  }
  .client-logos img {
      opacity: 0.7;
      filter: grayscale(50%) invert(10%) brightness(1.5); /* Adjust for dark theme */
  }


  /* FEATURES (Cards, Icons)
  ----------------------*/
  .gradient-fill:before {
    /* For Themify icons to have gradient color */
    background: linear-gradient(to bottom, var(--accent-color) 0%, var(--accent-color-darker) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .card.features {
    border: 0;
    border-radius: 8px; /* Softer radius for cards */
    background-color: var(--bg-card);
    box-shadow: 0px 8px 20px var(--card-shadow);
    transition: all 0.3s ease;
    overflow: hidden; /* For the :before element */
    position: relative; /* For the :before element */
    padding: 1.5rem;
  }

  @media (max-width:991px) {
    .card.features {
      margin-bottom: 2rem;
    }
    [class^="col-"]:last-child .card.features {
      margin-bottom: 0;
    }
  }

  .card.features:before { /* Accent line */
    content: "";
    position: absolute;
    width: 5px; /* Thicker accent line */
    background: linear-gradient(to bottom, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.8;
  }

  .card.features .media {
      align-items: flex-start; /* Align icon top */
  }
  .card.features .ti-3x {
      font-size: 2.5em; /* Slightly smaller icons */
      margin-right: 1rem !important;
  }


  .card-text {
    font-size: 15px; /* Standard card text size */
    color: var(--text-muted);
  }
  .card.features .card-title {
      color: var(--headings-color);
  }

  .card.features:hover {
    transform: translateY(-5px); /* More pronounced hover effect */
    box-shadow: 0px 12px 35px var(--card-shadow);
  }

  .box-icon { /* For standalone icon boxes */
    box-shadow: 0px 0px 30px var(--card-shadow);
    padding: 12px;
    width: 70px; /* Consistent size */
    height: 70px;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    background-color: var(--bg-card); /* Consistent with cards */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box-icon .ti-3x {
      font-size: 2.2em; /* Adjust icon size in box */
  }


  .circle-icon { /* For numbered steps */
    box-shadow: 0px 9px 25px var(--card-shadow);
    padding: 10px;
    width: 80px; /* Slightly smaller */
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background-color: var(--bg-card);
    color: var(--accent-color);
    font-size: 38px; /* Adjusted font size */
    text-align: center;
    line-height: 60px; /* Adjusted line height */
    font-weight: 400; /* Bolder number */
    transition: all 0.3s ease;
  }

  @media (max-width:992px) {
    .circle-icon {
      width: 60px;
      height: 60px;
      font-size: 24px;
      line-height: 40px;
    }
  }

  .ui-steps li:hover .circle-icon {
    background-image: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    box-shadow: 0px 10px 30px var(--card-shadow);
    color: #FFF;
    transform: scale(1.05); /* Slight scale on hover */
  }

  .ui-steps li {
    padding: 15px 0;
  }

  .ui-steps li:not(:last-child) {
    border-bottom: 1px solid var(--border-color); /* Use variable for border */
  }
  .ui-steps h5 {
      color: var(--headings-color);
  }

  .perspective-phone {
    position: relative;
    z-index: 1; /* Ensure it's above bg, but below content if overlapping */
  }
  .perspective-phone img {
     animation: float-perspective 7s ease-in-out infinite alternate;
  }

  @keyframes float-perspective {
      0% { transform: translateY(0) rotate(-5deg); }
      100% { transform: translateY(-20px) rotate(3deg); }
  }


  @media (min-width:992px) {
    .perspective-phone {
      margin-top: -150px;
    }
     .section .offset-lg-6 + .perspective-phone { /* If content is on right, phone on left */
          position: absolute;
          left: -5%; /* Adjust as needed */
          max-width: 45%;
          top: 50%;
          transform: translateY(-50%);
      }
      .section .perspective-phone + .offset-lg-6 { /* If phone image defined first visually */
           margin-left: 50%; /* ensure text content is pushed over */
      }
  }


  /* TABS
  ----------------------*/
  .nav-tabs {
    border-bottom: 0;
    border-radius: 8px 8px 0 0; /* Rounded top corners for the tab bar */
    overflow: hidden; /* Clip content for rounded corners */
  }

  .nav-tabs .nav-item .nav-link {
    padding: 1rem 1.5rem; /* More padding */
    font-size: 17px; /* Larger tab titles */
    font-weight: 500;
    color: var(--text-muted);
    background-color: var(--bg-card); /* Tabs background */
    border: none; /* Remove default borders */
    border-bottom: 3px solid transparent; /* Placeholder for active state */
    transition: all 0.3s ease;
    border-radius: 0; /* No individual radius */
  }
  
  .nav-tabs .nav-item:not(:last-child) .nav-link {
      border-right: 1px solid var(--bg-light); /* Subtle separator */
  }

  .nav-tabs .nav-item .nav-link:hover {
    color: var(--accent-color-hover);
    background-color: var(--bg-light); /* Darken on hover */
  }

  .nav-tabs .nav-link.active,
  .nav-tabs .nav-link.active:focus,
  .nav-tabs .nav-link.active:hover {
    background-color: var(--bg-light); /* Active tab background */
    color: var(--accent-color);
    border-bottom: 3px solid var(--accent-color); /* Accent underline for active tab */
  }

  .tab-content {
    background-color: var(--bg-light); /* Content area background */
    box-shadow: 0px 8px 20px var(--card-shadow);
    padding: 2.5rem; /* More padding in content */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
  }


  @media (max-width:992px) {
    .tab-content {
      padding: 1.5rem;
    }
    .nav-tabs .nav-item .nav-link {
        font-size: 15px;
        padding: 0.8rem 1rem;
    }
  }

  .tab-content p {
    line-height: 1.8;
  }

  .tab-content h2 {
    margin-bottom: 0.5rem;
    color: var(--headings-color);
  }
  .tab-content img {
      border-radius: 6px; /* Rounded images in tabs */
  }


  /* TESTIMONIALS
  ----------------------*/
  .testimonials {
      position: relative; /* For arrow positioning */
  }
  .owl-carousel .owl-item img.client-img {
    width: 100px; /* Slightly smaller client image */
    margin: 30px auto 20px; /* Adjusted margin */
    border-radius: 50%;
    box-shadow: 0px 8px 25px var(--card-shadow);
    border: 3px solid var(--bg-light); /* Border for image */
  }

  .testimonials-single {
    text-align: center;
    max-width: 75%; /* Wider quote area */
    margin: 0 auto;
  }

  .blockquote {
    color: var(--text); /* Brighter blockquote text */
    font-weight: 300;
    font-style: italic;
    font-size: 1.1rem;
  }
  .testimonials-single h5 {
      color: var(--headings-color);
      margin-top: 1rem;
  }
  .testimonials-single .text-primary { /* Client location/title */
      font-weight: 400;
  }
  

  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next {
      background: var(--bg-card) !important;
      color: var(--accent-color) !important;
      border-radius: 50% !important;
      width: 45px !important;
      height: 45px !important;
      font-size: 20px !important;
      line-height: 45px !important;
      text-align: center !important;
      transition: all 0.3s ease !important;
      box-shadow: 0px 5px 15px var(--card-shadow) !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  .owl-carousel .owl-nav button.owl-prev:hover,
  .owl-carousel .owl-nav button.owl-next:hover {
      background: var(--accent-color) !important;
      color: var(--bg) !important;
  }
  .owl-carousel .owl-nav button.owl-prev {
      left: -20px; /* Adjust position */
  }
  .owl-carousel .owl-nav button.owl-next {
      right: -20px; /* Adjust position */
  }
  .owl-carousel .owl-nav button.owl-prev.disabled,
  .owl-carousel .owl-nav button.owl-next.disabled {
      opacity: 0.4;
      cursor: default;
  }
  @media (max-width: 767px) {
      .owl-carousel .owl-nav button.owl-prev { left: 5px; }
      .owl-carousel .owl-nav button.owl-next { right: 5px; }
      .testimonials-single { max-width: 90%; }
  }

  .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 40px; /* Space for dots */
  }

  .owl-theme .owl-dots .owl-dot span {
    background: var(--border-color); /* Dot color */
    width: 12px; /* Dot size */
    height: 12px;
    margin: 5px 7px;
    border-radius: 50%; /* Circular dots */
    transition: all 0.3s ease-in;
  }

  .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--accent-color-hover);
  }

  .owl-theme .owl-dots .owl-dot.active span {
    background: var(--accent-color);
    width: 25px; /* Active dot wider */
    border-radius: 6px; /* Pill shape for active dot */
  }


  /* IMAGE GALLERY (Owl Carousel)
  ----------------------*/
  .img-gallery .owl-item {
    box-shadow: 0px 10px 30px var(--card-shadow);
    transform: scale(0.85); /* Non-center items scaled down */
    transition: all 0.4s ease-in-out;
    border-radius: 10px; /* Rounded corners for gallery items */
    overflow: hidden;
    opacity: 0.6;
  }

  .img-gallery .owl-item.center {
    transform: scale(1); /* Center item full size */
    opacity: 1;
    z-index: 10; /* Bring center item to front */
  }
  .img-gallery .owl-item img {
      display: block;
      width: 100%;
      height: auto;
  }


  /* PRICING
  ----------------------*/
  @media (max-width:992px) {
    .card-deck {
      flex-direction: column;
    }
    .card-deck .card {
      margin-bottom: 30px; /* More space between stacked cards */
    }
  }

  .card.pricing {
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    border-radius: 8px;
    transition: all 0.3s ease;
  }
   .card.pricing:hover {
      transform: translateY(-5px);
      box-shadow: 0px 15px 40px var(--card-shadow);
  }


  .card.pricing.popular {
    border-top: 4px solid var(--accent-color); /* Prominent top border for popular plan */
    box-shadow: 0px 15px 45px var(--card-shadow); /* More shadow for popular */
    transform: scale(1.05); /* Slightly larger popular plan */
  }
  @media (max-width:992px) {
      .card.pricing.popular {
          transform: scale(1); /* No scale on mobile if stacked */
      }
  }


  .card.pricing .card-head {
    text-align: center;
    padding: 30px 0 15px;
  }
  .card.pricing .card-head small { /* Plan name */
      color: var(--accent-color);
      font-weight: 500;
      text-transform: uppercase;
  }

  .card.pricing .card-head .price {
    display: block;
    font-size: 42px;
    font-weight: 300;
    color: var(--headings-color); /* Pricing text color */
  }

  .card.pricing .card-head .price sub {
    bottom: 0;
    font-size: 50%;
    font-weight: 400;
  }

  .card.pricing .list-group-item {
    border:0; /* Remove default borders */
    border-bottom: 1px solid var(--border-color); /* Custom separator */
    text-align: center;
    color: var(--text-muted);
    padding: 0.9rem 1.25rem;
    background-color: transparent; /* Ensure it's transparent */
  }
  .card.pricing .list-group-item:last-child {
      border-bottom: 0;
  }


  .card.pricing .list-group-item del {
    color: #718096; /* Darker muted for strikethrough */
  }

  .card.pricing .card-body {
    padding: 1.75rem;
  }
  .card.pricing .btn-block {
      padding: 0.8rem 1rem; /* Ensure consistent padding */
  }


  /* CALL TO ACTION
  ----------------------*/
  .section.bg-gradient .call-to-action { /* If CTA is on a gradient section */
     color: #FFF; /* Text should be white */
  }

  .call-to-action {
    text-align: center;
    /* color: var(--text); Default text color */
    margin: 3rem 0;
  }

  .call-to-action .box-icon { /* Icon for CTA */
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    transform: scale(0.9); /* Slightly smaller icon box */
    margin-bottom: 2rem;
    background-color: #FFF; /* White background for icon on gradient */
  }
  .call-to-action .box-icon .gradient-fill:before {
      background: linear-gradient(to bottom, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }


  .call-to-action h2 {
    color: inherit; /* Inherit from .section.bg-gradient or body */
  }

  .call-to-action .tagline {
    font-size: 17px;
    font-weight: 300;
    color: #E0F2FE; /* Light blue on dark gradient */
    max-width: 650px;
    margin: 0 auto 1.5rem;
  }
  
  .call-to-action .btn-light {
      background: rgba(255, 255, 255, 0.9);
      color: var(--primary-gradient-end);
      border: none;
  }
  .call-to-action .btn-light:hover {
      background: #FFF;
      color: var(--primary-gradient-start);
       box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
  }

  .btn-light img { /* For icons in buttons */
    margin-right: 0.6rem;
    vertical-align: middle; /* Align icon with text */
    height: 20px; /* Adjust icon size */
  }
  .call-to-action .text-primary small i { /* For small text like "Works on iOS..." */
      color: #BBE5FF !important; /* Lighter, less prominent than main accent */
  }


  /* FOOTER
  ----------------------*/
  .light-bg#contact { /* Contact section specific */
      padding: 60px 0;
  }
  #contact p, #contact a {
      color: var(--text-muted);
      font-size: 0.95rem;
  }
   #contact a:hover {
      color: var(--accent-color-hover);
  }
  #contact .ti { /* Icons in contact info */
      color: var(--accent-color);
      margin-right: 0.5rem;
  }


  .social-icons {
    text-align: right;
  }

  .social-icons a {
    background-color: var(--bg-card);
    box-shadow: 0px 4px 15px var(--card-shadow);
    width: 45px; /* Slightly smaller social icons */
    height: 45px;
    display: inline-flex; /* Use flex for centering */
    align-items: center;
    justify-content: center;
    margin: 0 0.4rem;
    border-radius: 50%; /* Circular social icons */
    color: var(--accent-color);
    font-size: 1.1rem;
    transition: all 0.3s ease;
  }

  .social-icons a:hover {
    text-decoration: none;
    color: var(--bg-card);
    background-color: var(--accent-color-hover);
    transform: translateY(-3px); /* Lift on hover */
  }

  @media (max-width:991px) {
    .light-bg#contact .text-lg-left, .light-bg#contact .col-lg-6 {
        text-align: center !important;
    }
    .social-icons {
      text-align: center;
      margin-top: 2rem;
    }
  }
  
  footer.my-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
  }
  footer p small, footer small a {
      color: var(--text-muted);
  }
  footer small a:hover {
      color: var(--accent-color);
  }