/*
Theme Name: Hilios Technologie Inc
Theme URI: http://example.com/my-business-theme
Author: Shawn Matadeen
Author URI: https://hilios.ca/
Description: Repair, Service, Installation and Maintenance.
Version: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Hilios
Tags: business, corporate, responsive
*/


/* ==============================
   Global Styles
   ============================== */

html, body {
  scroll-behavior: smooth;
  color: #000000;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  scroll-padding-top: 60px;
}

main {
  flex: 1;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:link,
a:visited {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #999;
  text-decoration: none;
}
a:active {
  color: #000;
  text-decoration: none;
}
p {
  font-size: 10pt;
  !important;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
section.services,
section.steps,
section.about,
section.contact,
section.footer,
section.call-to-action,
section.single-service,
section.single-products {
  padding: 20px;
  font-size: 10pt; }

.product-item {margin-bottom: 20px;}

.single-products {
  margin-top: 100px; /* adjust this depending on your navbar height */
}


}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {



}

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  ...
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  ...
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  section.services,section.steps,section.about,section.contact,section.footer,section.call-to-action,section.products {
  padding: 40px;
}

.single-products {
  padding-top: 120px; /* adjust this depending on your navbar height */
}

.product-item h5 {font-size: 15px;}

}
/* ==============================
   Header - Layout and Design
   ============================== */

.carousel-item img {
  height: 500px;
  object-fit: cover;
}
/* ==============================
   Navbar Styles
   ============================== */

.navbar {
  font-size: 10pt;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  /* Ensure navbar stays on top */
  padding: 0 15px;
  /* Add some padding to the sides */
}
/* Logo Styles */
.logo {
  height: 40px;
  width: 100px;
  object-fit: contain;
  /* Ensures the logo scales properly without distortion */
}
/* Navbar Link Styles */
.navbar-nav .nav-link i {
  color: #009bff;
  /* Set the color to #009bff */
}
.navbar-nav .nav-link:hover i {
  color: #0077cc;
  /* Optional: change color on hover */
}
/* Style the language dropdown to make it fit in with the navbar */
.navbar-nav .pll-lang-dropdown {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 15px;
  font-size: 14px;
  font-weight: 600;
}
/* Dropdown icon styling (if you use a flag) */
.navbar-nav .pll-lang-dropdown select {
  background-color: transparent;
  border: 1px solid #ccc;
  /* Light border around the dropdown */
    padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  /* Text color */
    outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* Hover effect to make the dropdown stand out */
.navbar-nav .pll-lang-dropdown select:hover {
  border-color: #007bff;
  /* Blue border on hover */
}
/* Option styling */
.navbar-nav .pll-lang-dropdown select option {
  padding: 10px;
  background-color: #fff;
  font-size: 10pt;
  color: #333;
}
/* Make sure the dropdown is not too wide */
.navbar-nav .pll-lang-dropdown select {
  max-width: 150px;
}
/* Focus effect when the user clicks or tabs to the dropdown */
.navbar-nav .pll-lang-dropdown select:focus {
  border-color: #0056b3;
  /* Darker blue border on focus */
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.3);
  /* Subtle shadow on focus */
}
/* Style flags (if enabled) */
.navbar-nav .pll-lang-dropdown .pll-lang-item img {
  width: 20px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
}
/* Style language names */
.navbar-nav .pll-lang-dropdown .pll-lang-item {
  font-size: 10pt;
  font-weight: normal;
}
/* Add space between items */
.navbar-nav .pll-lang-dropdown {
  margin-left: 20px;
}
/* Default styles for the language dropdown */
.navbar-nav .pll-lang-dropdown {
  /* Ensure no margin or padding is causing space issues */
    margin-left: 10px;
  !important;
  margin-right: 0 !important;
}
/* Media query for mobile screens (max-width: 768px) */
@media (max-width: 768px) {
  /* Fix any alignment issues */
    .navbar-nav {
  display: flex;
  /* Ensures flexbox is used */
        justify-content: flex-start;
  /* Align all navbar items to the left */
        width: 100%;
  /* Make sure the nav takes up the full width */
}
/* Fix the positioning of the language switcher */
    .navbar-nav .pll-lang-dropdown {
  margin-top: 20px;
  margin-left: 0px;
  /* Adjust the left margin to align with other items */
        margin-right: 0;
  /* Reset any right margin */
        order: 1;
  /* If needed, change the order of elements to position it correctly */
}

}
/* ==============================
   Button Styles (Request a Quote)
   ============================== */

.navbar-nav .nav-item .btn-primary {
  background-color: #009bff;
  /* Blue background */
  font-size: 10pt;
  color: #ffffff;
  /* White text */
  padding: 5px 20px;
  /* Add some padding */
  border-radius: 30px;
  /* Rounded corners */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Smooth transition for hover effects */
  border: none;
  /* Remove default border */
}
.navbar-nav .nav-item .btn-primary:hover {
  background-color: #005bb5;
  /* Darker blue on hover */
  transform: scale(1.05);
  /* Slightly enlarge the button on hover */
}
.navbar-nav .nav-item .btn-primary:focus {
  outline: none;
  /* Remove focus outline */
}
/* ==============================
    Services Section Styles
   ============================== */
section.services h1,
section.services h2,
section.services h3,
section.services h4,
section.services h5,
section.services h6 {
color: #009bff;
text-align: center;
 margin-top: 10px;
}
.single-service-container {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* Optional: Adds rounded corners */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Optional: Adds smooth hover effects */
}
.single-service-container:hover {
  transform: scale(1.05);
  /* Optional: Slightly scales up the container on hover */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Optional: Adds shadow effect on hover */
}
.single-service-container h5 {
  color: #009bff;
}
.services {
  font-size: 10pt;
  background-color: #f4f4f4;
  /* Background color for the entire section */
  padding: 60px 0;
  /* Padding for the section */
}
.services .service img {
  width: 100%;
  height: 300px; /* or whatever works for your layout */
  object-fit: cover;
  display: block;
  /* Remove any extra spacing below the image */
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Responsive grid layout */
    gap: 20px;
  /* Adjust gap between items */
}


/*
.products-grid {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}*/

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 0 auto;
  /* max-width: 800px; REMOVE THIS */
  width: 70%; /* allow full width */
}

.products-grid-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 0 auto;
  /* max-width: 800px; REMOVE THIS */
  width: 100%; /* allow full width */
}


.product-card {
    background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 0 0 auto;
  width: 250px;
}

.products-grid-posts h5 {
  font-size: 10pt;
  font-weight: 400;
  margin: 10px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* limits to 2 lines */
  -webkit-box-orient: vertical;
}


@media (max-width: 768px) {
  .services-grid {
  grid-template-columns: 1fr;
  /* Stack items vertically on smaller screens */
}
.service img {
  width: 100%;
  /* Ensure image is fully responsive */
}

}
.services .container {
  width: 100%;
  max-width: 1200px;
  /* Centering the container */
  margin: 0 auto;
  /* Ensure it's centered */
}

.service p {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  /* Limits to 7 lines */
    -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Optional: Adds smooth hover effects */
}
.service:hover {
  transform: translateY(-5px);
  /* Optional: Adds hover effect */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* Optional: Enhances shadow on hover */
}
.services .service .btn {
  display: flex;
  justify-content: center;
  /* Horizontally center the button */
    align-items: center;
  /* Vertically center the button (optional, in case of height differences) */
    display: inline-block;
  background-color: #007bff;
  color: #fff;
  font-size: 10pt;
  text-decoration: none;
  padding: 5px 20px;
  /* Add some padding */
  border-radius: 30px;
  /* Rounded corners */
    transition: background-color 0.3s ease;
}
.services .service .btn:hover {
  background-color: #0056b3;
}
/* Product Image Styles */
.service img {
  max-width: 100%;
  /* Ensure images don't overflow */
  height: auto;
  object-fit: cover;
  /* Ensures the image covers the container without distortion */
}
/* Mobile View (<=767px) Styles */
@media (max-width: 767px) {
  .services-grid {
  grid-template-columns: 1fr;
  /* Stack items in 1 column on smaller screens */
}

}
/* ==============================
   Plans Section Styles
   ============================== */

/* Product Image Styles */
.plan-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
/* Product Thumbnail Styles */
.plan-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* Product Excerpt Limiting to 4 Lines */
.plan-item p {
  font-size: 10pt;
  /* Adjust the font size to your desired value */
    color: #333;
  /* Optional: Set text color if needed */
    display: -webkit-box;
  /* Required for line-clamp */
    -webkit-box-orient: vertical;
  /* Specifies vertical stacking of lines */
    overflow: hidden;
  /* Hide overflowed text */
    -webkit-line-clamp: 4;
  /* Limit to 4 lines of text (change to 5 for 5 lines) */
}
/* Product Title (h5) Styles */
.plan-item h5 {
  margin-top: 10pt;
  color: #009bff;
  /* Optional: Set text color if needed */
}
/* Button wrapper styling (optional) */
.plan-item .read-more-btn-wrapper {
  display: flex;
  justify-content: center;
  /* Center the button horizontally */
    margin-top: 20px;
  /* Add some margin above the button */
}
.plan-item .read-more-btn-wrapper a {
  font-size: 10pt;
  color: #ffffff;
  /* Change text color to white */
    text-decoration: none;
  /* Remove underline */
    background-color: #007bff;
  /* Add background color for the button */
    border-radius: 30px;
  /* Rounded corners */
    padding: 10px 20px;
  /* Add padding for better button size */
    transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
}
.plan-item .read-more-btn-wrapper a:hover {
  color: #ffffff;
  /* Change text color to white */
    text-decoration: none;
  /* Remove underline */
    background-color: #0056b3;
  /* Add background color for the button */
    border-radius: 30px;
  /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
}
/* Pagination */
.pagination-container {
  text-align: center;
  margin-top: 20px;
}
.page-numbers {
  padding: 8px 15px;
  margin: 0 5px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
}
.page-numbers.current {
  background-color: #007bff;
  color: white;
}
.page-numbers:hover {
  background-color: #005bb5;
  color: #ffffff;
}
.page-numbers.prev, .page-numbers.next {
  font-weight: none;
}
.plan-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.plan-thumbnail img {
  max-width: 100%;
  height: auto;
}
/* Product Item Container Styles */
.plan-item {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* Optional: Adds rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Optional: Adds smooth hover effects */
}
/* Hover Effects for Product Item */
.plan-item:hover {
  transform: translateY(-5px);
  /* Optional: Adds hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* Optional: Enhances shadow on hover */
}
/* Mobile View (<=767px) Styles */
@media (max-width: 767px) {
  .plan-details {
  display: block;
}
.plan-info,
    .plan-image {
  width: 100%;
}
.additional-images img {
  width: 100%;
}

}
/* Make sure the grid stays responsive on smaller screens */
.plans-grid .col-md-3 {
  flex: 0 0 25%;
  /* Ensures 4 columns for large screens */
}
@media (max-width: 1200px) {
  .plans-grid .col-md-3 {
  flex: 0 0 33.33%;
  /* 3 columns on medium screens */
}

}
@media (max-width: 992px) {
  .plans-grid .col-md-3 {
  flex: 0 0 50%;
  /* 2 columns on small screens */
}

}
@media (max-width: 768px) {
  .plans-grid .col-md-3 {
  flex: 0 0 100%;
  /* 1 column on extra small screens */
}

}
/* ==============================
   Process Section Styles
   ============================== */
section.process {
  font-size: 10pt;
  line-height: 15pt;
  background-color: rgba(0, 0, 0, 0.5);
  /* Ensures the background color doesn’t interfere */
  position: relative;
  /* Make sure we can absolutely position the pseudo-element */
  display: flex;
  /* Enable flexbox layout */
  align-items: center;
  /* Vertically center content */
  justify-content: center;
  /* Optionally horizontally center content */
  color: #ffffff;
  /* Set text color to black */
  padding: 5% 0;
}
section.process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/img-3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Fix the background position */
  opacity: 0.5;
  z-index: -1;
}
/* ==============================
   Process Step Layout Styles
   ============================== */
.process-steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  width: 100%;
}

/* Each Step Card */
.step {
  /* background: rgba(0, 155, 255, 0.9); /* White background with slight transparency */
  border-radius: 12px;
  padding: 30px 20px;
  max-width: 250px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 300px;
  box-sizing: border-box;
  transition: transform 0.3s ease, background 0.3s ease;
  color: #fff; /* Dark gray text color for good contrast */
}

/* Hover Effect */
.step:hover {
  transform: translateY(-5px);
}

/* Icon */
.step i {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 20px;
}

/* Title */
.step h5 {
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 15px 0 10px 0;
  font-size: 18px;
}

/* Description */
.step p {
  color: #ddd;
  font-size: 14px;
  margin: 0;
  flex-grow: 1; /* Makes text fill available space if needed */
}

/* Responsive Behavior */
@media (max-width: 991px) {
  .process-steps {
    justify-content: center;
  }
  .step {
    max-width: 45%;
  }
}

@media (max-width: 600px) {
  .step {
    max-width: 100%;
  }
}

/* ==============================
   Arrow Styling
   ============================== */
.arrow-icon {
  font-size: 30px;
  /* Arrow size */
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  /* Space between arrow and steps */
}
/* ==============================
   Responsive Layout
   ============================== */
@media (max-width: 767px) {
  .process-steps {
  flex-direction: column;
  gap: 30px;
  /* Add more space between steps on smaller screens */
}
.step {
  max-width: none;
  /* Allow the columns to take full width */
    min-height: auto;
  /* Remove the min-height to allow natural text height */
}

}
/* ===========================
   About - Layout and Design
   =========================== */

section.about {
  font-size: 10pt;
  line-height: 15pt;
}
/* Remove the border around the wrapper */
.wrapper {
  width: 100%;
  margin: 0 auto;
  border: none !important;
  /* No border */
    font-size: 10pt;
  /* Set font size */
}


/* Accordion item */
.accordion-item {
  border: none !important;
  font-size: 10pt;
}

/* Accordion header */
.accordion-header {
  border: none !important;
  background: none !important;
  font-size: 10pt;
}

/* Accordion button (active/open) */
.accordion-button {
  border: none !important;
  background-color: #009bff !important; /* Blue background */
  color: white !important;              /* White text */
  font-size: 10pt;
  box-shadow: none !important;

}

/* Arrow icon when active (white) */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1); /* Make arrow white */
}

/* Collapsed (inactive) accordion button */
.accordion-button.collapsed {
  background-color: #f4f4f4 !important; /* Light gray background */
  color: #000000 !important;           /* Black text */
}

/* Arrow icon when collapsed (default black) */
.accordion-button.collapsed::after {
  filter: none !important; /* Keep default black arrow */
}

/* Accordion body content */
.accordion-body {
  background-color: #fff; /* White background */
  color: #333;
  padding: 20px;
  border: none !important;
  font-size: 10pt;
}

/* Focus styles */
.accordion-button:focus,
.accordion-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: #009bff !important;
  color: white !important;
}

/* Collapse and header wrappers - no borders or shadows */
.accordion-collapse,
.accordion-header,
.accordion-item {
  border: none !important;
  box-shadow: none !important;
}




.about-title {
  border-left: 5px solid #009bff;
  font-size: 40px;
}
section.about h1,
section.about h2,
section.about h3,
section.about h4,
section.about h5,
section.about h6 {
  color: #009bff;

}
.image-container img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Optional: makes image cover the container if it's larger */
}
.company-logo {
  width: 500px;
  /* Adjust width to your desired size */
  height: 500px;
  /* Ensure the height is the same as the width */
  object-fit: cover;
  /* Ensure the image covers the area without stretching */
}
/* ===========================
   Call-To-Action - Layout and Design
   =========================== */

section.call-to-action {
  font-size: 10pt;
  line-height: 15pt;
  background-color: rgba(0, 0, 0, 0.5);
  /* Ensures the background color doesn’t interfere */
  position: relative;
  /* Make sure we can absolutely position the pseudo-element */
  height: 300px;
  /* Set the height of the container */
  display: flex;
  /* Enable flexbox layout */
  align-items: center;
  /* Vertically center content */
  justify-content: center;
  /* Optionally horizontally center content */
  color: #ffffff;
  /* Set text color to white */
}
section.call-to-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/img-4.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Fix the background position */
  opacity: 0.5;
  z-index: -1;
  /* Place the image behind the content */
}
.call-to-action .row {
  width: 100%;
  display: flex;
  /* Make the row use flexbox */
  align-items: center;
  /* Vertically center the contents */
  justify-content: space-between;
  /* Distribute space between left and right columns */
}
.call-to-action .col-left {
  display: flex;
  justify-content: flex-start;
  /* Align text to the left */
  align-items: center;
  flex: 1;
  /* Allow this column to take available space */
}
.call-to-action .col-right {
  display: flex;
  justify-content: flex-end;
  /* Align button to the right */
  align-items: center;
  flex-shrink: 0;
  /* Prevent this column from shrinking */
}
.call-to-action .col-right button {
  margin-left: 20px;
  /* Adds space between text and button */
}
.cta-btn {
  background-color: #007bff;
  /* Button background color */
  color: #ffffff;
  /* Text color */
  border: none;
  font-size: 10pt;
  padding: 5px 20px;
  /* Add some padding */
  border-radius: 30px;
  /* Rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;
  /* Smooth transition for hover effect */
}
.cta-btn:hover {
  background-color: #0056b3;
  /* Darker blue when hovered */
  transform: translateY(-3px);
  /* Button lifts slightly on hover */
}
.cta-btn:focus {
  outline: none;
  /* Remove default outline on focus */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
  /* Focus effect */
}
/* ===========================
   Contact - Layout and Design
   =========================== */

section.contact {
  background-color: #f4f4f4;
  font-size: 10pt;
}
section.contact h1, 
section.contact h2, 
section.contact h3, 
section.contact h4, 
section.contact h5, 
section.contact h6 {
  color: #009bff;
}
section.contact ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
section.contact ul li:nth-child(odd) {
  background-color: #ffffff;
  /* White background for odd rows */
}
section.contact ul li:nth-child(even) {
  background-color: #f4f4f4;
  /* Light gray background for even rows */
}
section.contact ul li {
  padding: 5pt 0;
  /* Add padding to each list item */
  border-bottom: 1px solid #ddd;
  /* Optional: Add a subtle border between rows */
}
section.contact .business-hours li {
  color: #333;
  /* Set text color to dark gray for better readability */
}
/* ===========================
   Contact Form 7 Two-Column Layout
   =========================== */

.cf7-two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* Space between columns */
}
.cf7-column p {
  padding: 0;
  margin: 0;
}
.cf7-column {
  flex: 1 1 calc(50% - 10px);
  /* Two columns, with a gap in between */
  min-width: 250px;
  /* Prevent columns from becoming too narrow */
  padding: 0;
  margin: 0;
}
.cf7-column label {
  display: block;
  font-weight: bold;
}
.cf7-column input, 
.cf7-column textarea {
  width: 100%;
  font-size: 10;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.cf7-column input[type="submit"] {
  background-color: #0073e6;
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 10pt;
  border-radius: 4px;
}
.cf7-column input[type="submit"]:hover {
  background-color: #005bb5;
}
/* ===========================
   Icon Styles
   =========================== */

.icon-group {
  display: flex;
  /* Use flexbox to arrange the icons horizontally */
  justify-content: start;
  /* Align icons to the start of the container (left side) */
  align-items: center;
  /* Vertically center the icons */
  gap: 10px;
  /* Space between the icons */
}
.icon-container {
  width: 35px;
  /* Set a fixed width for the square */
  height: 35px;
  /* Set a fixed height for the square */
  background-color: #0073e6;
  /* Initial background color (dark gray) */
  display: flex;
  /* Use flexbox to center the icon inside the square */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Smooth transition */
}
.icon-container i {
  font-size: 10pt;
  /* Adjust the icon size */
  color: white;
  /* Set the icon color to white */
  transition: transform 0.3s ease;
  /* Smooth scaling effect */
}
.icon-container:hover {
  background-color: #005bb5;
  /* Change background color to orange on hover */
}
.icon-container:hover i {
  color: white;
  /* Ensure icon stays white, or change color */
}
/* ===========================
   Contact Info Styles
   =========================== */

.contact-info {
  display: flex;
  /* Use flexbox to align the items side by side */
  flex-direction: column;
  /* Stack the items vertically (one on top of the other) */
  gap: 10pt;
  /* Space between each contact item */
}
.contact-item {
  display: flex;
  /* Align icon and text side by side */
  align-items: center;
  /* Vertically center the items */
  gap: 5pt;
  /* Space between the icon and the text */
}
.contact-icon {
  background-color: #0073e6;
  /* Set background color to #0073e6 (blue) */
  width: 35px;
  /* Set the icon container width */
  height: 35px;
  /* Set the icon container height */
  display: flex;
  /* Use flexbox to center the icon inside the container */
  justify-content: center;
  /* Center the icon horizontally */
  align-items: center;
  /* Center the icon vertically */
}
.contact-icon i {
  font-size: 10pt;
  /* Set the icon size */
  color: white;
  /* Set the icon color to white */
}
.contact-info-text p {
  margin: 0;
  /* Remove default margins */
}
/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 600px) {
  .contact-info {
  gap: 10px;
}
.contact-item {
  gap: 10px;
}
.contact-info-text p {
  font-size: 16px;
}

}
/* ===========================
   Products - Layout and Design
   =========================== */

/* Product Image Styles */
.product-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
/* Product Thumbnail Styles */
.product-thumbnail img {
  width: 100%;
  height: 100px;
  display: block;
  object-fit: cover;
}
/* Product Excerpt Limiting to 4 Lines */
.product-item p {
  font-size: 10pt;
  /* Adjust the font size to your desired value */
    color: #333;
  /* Optional: Set text color if needed */
    display: -webkit-box;
  /* Required for line-clamp */
    -webkit-box-orient: vertical;
  /* Specifies vertical stacking of lines */
    overflow: hidden;
  /* Hide overflowed text */
    -webkit-line-clamp: 6;
  /* Limit to 4 lines of text (change to 5 for 5 lines) */
}
/* Product Title (h5) Styles */
.product-item h5 {
  margin-top: 10pt;
  color: #333;
  /* Optional: Set text color if needed */
}
/* Button wrapper styling (optional) */
.product-item .read-more-btn-wrapper {
  display: flex;
  justify-content: center;
  /* Center the button horizontally */
    margin-top: 20px;
  /* Add some margin above the button */
}
.product-item .read-more-btn-wrapper a {
  font-size: 10pt;
  color: #ffffff;
  /* Change text color to white */
    text-decoration: none;
  /* Remove underline */
    background-color: #007bff;
  /* Add background color for the button */
    border-radius: 30px;
  /* Rounded corners */
    padding: 10px 20px;
  /* Add padding for better button size */
    transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
}
.product-item .read-more-btn-wrapper a:hover {
  color: #ffffff;
  /* Change text color to white */
    text-decoration: none;
  /* Remove underline */
    background-color: #0056b3;
  /* Add background color for the button */
    border-radius: 30px;
  /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
}
/* Pagination */
.pagination-container {
  text-align: center;
  margin-top: 20px;
}
.page-numbers {
  padding: 8px 15px;
  margin: 0 5px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
}
.page-numbers.current {
  background-color: #007bff;
  color: white;
}
.page-numbers:hover {
  background-color: #005bb5;
  color: #ffffff;
}
.page-numbers.prev, .page-numbers.next {
  font-weight: none;
}
.product-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.product-thumbnail img {
  max-width: 100%;
  height: auto;
}
/* Product Item Container Styles */
.product-item {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* Optional: Adds rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Optional: Adds smooth hover effects */
}
/* Hover Effects for Product Item */
.product-item:hover {
  transform: translateY(-5px);
  /* Optional: Adds hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* Optional: Enhances shadow on hover */
}
/* Mobile View (<=767px) Styles */
@media (max-width: 767px) {
  .product-details {
  display: block;
}
.product-info,
    .product-image {
  width: 100%;
}
.additional-images img {
  width: 100%;
}

}
.services .service .btn:hover {
  background-color: #005bb5;
}
/* Style the anchor tag */
.choose-plan-btn {
  display: inline-block;
  /* Makes the anchor tag behave like a button */
    text-decoration: none;
  /* Removes the default underline from the link */
}
/* Style the button inside the anchor tag */
.choose-plan-btn button {
  background-color: #009bff;
  /* Blue background for the button */
    color: white;
  /* White text color */
    padding: 10px 20px;
  /* Padding to make the button larger */
    border: none;
  /* Remove the default button border */
    border-radius: 5px;
  /* Rounded corners for the button */
    font-size: 16px;
  /* Font size for readability */
    cursor: pointer;
  /* Pointer cursor to show it's clickable */
    transition: background-color 0.3s ease, transform 0.3s ease;
  /* Smooth transitions for hover effect */
}
/* Hover effect for the button */
.choose-plan-btn button:hover {
  background-color: #007acc;
  /* Darker blue on hover */
    transform: scale(1.05);
  /* Slightly enlarge the button on hover */
}
/* Focus state for accessibility */
.choose-plan-btn button:focus {
  outline: none;
  /* Remove the default focus outline */
    box-shadow: 0 0 5px rgba(0, 155, 255, 0.6);
  /* Add a soft blue glow on focus */
}
/* ===========================
   Footer Section - Layout and Design
   =========================== */

.footer {
  font-size: 10pt;
  background-color: #ebebeb;
  padding: 40px 0;
  bottom: 0;
  width: 100%;
}
.footer li {
  list-style-type: none;
  padding: 0;
}
.footer-column-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.footer-column {
  flex: 1;
}
.footer-column h3 {
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .footer-column-wrapper {
  flex-direction: column;
  gap: 15px;
}

}
.wp-block-heading {
  margin-bottom: 0px;
  padding-bottom: 5px;
  color: #333;
}
/* Style for the Footer Menu */
#menu-menu-eng-1, #menu-menu-fr-1 {
  padding: 0;
  margin: 0;
}
/* Style for each menu item */
#menu-menu-eng-1 .menu-item, #menu-menu-fr-1 .menu-item {
  display: block;
  /* Change to block to stack vertically */
    padding: 5pt 0;
  /* Padding to each list item */
    border-bottom: 1px solid #ddd;
  /* Optional: Subtle border between rows */
}
/* Apply alternating background color for odd and even items */
#menu-menu-eng-1 .menu-item:nth-child(odd), #menu-menu-fr-1 .menu-item:nth-child(odd) {
  background-color: #f0f0f0 ;
  /* White background for odd rows */
}
#menu-menu-eng-1 .menu-item:nth-child(even), #menu-menu-fr-1 .menu-item:nth-child(even) {
  background-color: #e8e8e8 ;
  /* Light gray background for even rows */
}
/* Style for the menu links */
#menu-menu-eng-1 .menu-item a, #menu-menu-fr-1 .menu-item a {
  padding-left: 10px;
  color: #000;
  /* Text color */
    text-decoration: none;
  /* Remove underlines */
    font-size: 10pt;
  /* Font size */
    transition: color 0.3s;
  /* Smooth transition for hover effect */
    display: block;
  /* Make links block elements to fill width */
}
/* Style for the menu items when hovered */
#menu-menu-eng-1 .menu-item a:hover, #menu-menu-fr-1 .menu-item a:hover {
  color: #0073e6;
  /* Change color to gold on hover */
}
/* Highlight the current/active menu item */
#menu-menu-eng-1 .current-menu-item a, #menu-menu-fr-1 .current-menu-item a {
  color: #000;
  /* Active menu item color */
}
/* Style the submenu items if there are any (for dropdown menus) */
#menu-menu-eng-1 .menu-item .sub-menu, #menu-menu-fr-1 .menu-item .sub-menu {
  display: none;
  /* Hide submenus by default */
    background-color: #444;
  /* Dark background for submenus */
    position: absolute;
  /* Position submenus absolutely */
    padding: 10px 0;
  /* Add padding to submenus */
    width: 200px;
  /* Set width for submenus */
}
/* Show submenus on hover */
#menu-menu-eng-1 .menu-item:hover .sub-menu, #menu-menu-fr-1 .menu-item:hover .sub-menu {
  display: block;
  /* Show submenu on hover */
}
/* Style for the submenu links */
#menu-menu-eng-1 .menu-item .sub-menu a, #menu-menu-fr-1 .menu-item .sub-menu a {
  color: #000;
  /* Text color for submenu links */
    padding: 10px 20px;
  /* Padding for submenu links */
}
/* Style for the submenu links when hovered */
#menu-menu-eng-1 .menu-item .sub-menu a:hover, #menu-menu-fr-1 .menu-item .sub-menu a:hover {
  color: #f1c40f;
  /* Change submenu link color on hover */
}
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  background-color: #0073e6;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  display: none;
  z-index: 1000;
}
.scroll-to-top:hover {
  background-color: #005bb5;
}