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


: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: #222222; /* Color for headings, subheadings and title throughout the website */
  --accent-color:  #74aae4;
; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* 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: #444444;  /* The default color of the main navmenu links */
  --nav-hover-color: #74aae4; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #74aae4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

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

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

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  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: 50px;
  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 {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}


.sitename {
  margin-left: 10px; 
  font-size: 1.5rem; /* Adjust the font size as needed */
  color: #333; /* Adjust the text color as needed */
}




/*--------------------------------------------------------------
# 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: 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 100%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
    max-height: 300px; /* Set a max height for the dropdown */
    overflow-y: auto; /* Enable vertical scrolling */
  }
  .navmenu .dropdown ul li {
    min-width: 200px;
    padding: 5px 10px; /* Adjust padding to control height */
    margin: 0;
  }

  .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;
    display: block;
  padding: 5px 10px; /* Adjust padding to control link height */
  text-decoration: none;
  }

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

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

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

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

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

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

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .dropdown-content.dropdown-active {
    display: block;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

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

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

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

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

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


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

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

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

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

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

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

.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: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 70vh;
  position: relative;
  padding: 80px 0 60px 0;
  display: flex;
  align-items: center;
}

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

.hero p {
  color:#5e5c5c;
  margin: 5px 0 20px 0;
  font-size: 22px;
  font-weight: 400;
}



.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

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

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;

  }

  
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}



/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  box-shadow: 0px 0 30px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.services .service-item:before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 60%);
  right: -80px;
  top: -80px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.services .service-item:after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 62%);
  right: -140px;
  top: -140px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.services .service-item i {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 24px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.services .service-item h4 {
  font-weight: 600;
  margin: 15px 0 0 0;
  transition: 0.3s;
  font-size: 20px;
}

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

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

.services .service-item:hover:before,
.services .service-item:hover:after {
  background: var(--accent-color);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.services .service-item:hover h4 a,
.services .service-item:hover p {
  color: var(--contrast-color);
}

.services .service-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .service-item {
  width: 100%;
  height: 400px; /* Reduced height for a smaller box */
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  
}

.alt-services .img {
  width: 100%;
  height: 100%; 
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;
  text-align: center; }

.alt-services .img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: 0.6s;
}

.alt-services .details {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 20px;
  transition: all ease-in-out 0.3s;
  background: color-mix(in srgb, var(--contrast-color), transparent 15%);
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);

  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alt-services .details h3 {
  font-weight: 700;
  margin: 10px 0 5px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
  margin-top: 20px;
}

.alt-services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 22px;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 10px; 
  margin-bottom: 0;
}

.alt-services .service-item:hover .details h3 {
  color: #000000;
}

.alt-services .service-item:hover .details p {
  color: #000000;
}

.alt-services .service-item:hover .img img {
  transform: scale(1.2);
}

h2 {
  margin-bottom: 30px;
}

ul.list-unstyled {
  text-align: left;
  padding-left: 0;
}

ul.list-unstyled li {
  margin-bottom: 15px;
  font-size: 18px;
}

ul.list-unstyled li i {
  margin-right: 10px;
}

.intro-container {
  background-color: #a4c7e9;
  border-radius: 5px;
  border-color: #333;
  border-color: #222222;
  margin-bottom: 60px;
}

.intro-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #343a40;
}


.box {
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  text-align: left;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  height: 250px; /* Fixed height for all boxes */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content at the top of the box */
  background-color: #ffffff;
  overflow: hidden; /* Ensure content does not overflow */
  position: relative; /* Position relative for absolute positioning */
}

.box:hover {
  transform: scale(1.05);
  border-color: #007bff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.box h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Colors for different types */
.box.presence h3 { color: #28a745; }
.box.type h3 { color: #6f42c1; }
.box.length h3 { color: #fd7e14; }
.box.range h3 { color: #dc3545; }
.box.format h3 { color: #007bff; }
.box.lists h3 { color: #ffc107; }
.box.misc h3 { color: #17a2b8; }

.box .content {
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

@media (max-width: 768px) {
  .box {
    height: auto; /* Allow boxes to expand based on content on smaller screens */
  }
}


.access-info {
  margin-bottom: 20px;
}

.contact-list {
  margin-top: 20px;
}

.contact-list li {
  margin-bottom: 10px;
}

.contact-list li strong {
  display: inline;
}

.contact-list li i {
  margin-right: 5px;
}

.download-link {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.download-link:hover {
  background-color: #0056b3;
  color: #fff;
}
.img-container {
  position: relative;
  width: 150px; /* Adjust width to be responsive */
  height: 200px;
  padding-top: 66.66%; /* Maintain aspect ratio */
  overflow: hidden;
  margin-right: 15px; /* Adjusted space between images */
  margin-left: 15px; /* Adjusted space between images */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s, filter 0.3s;
}

.img-container:hover img {
  transform: scale(1.2);
  filter: brightness(1.2);
}

.heading {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Ensure col-6 col-md-1 matches the image size */
.col-6.col-md-1 {
  width: 150px; /* Match the image width */
  height: 200px; /* Match the image height */
  padding: 0; /* Remove padding */
  margin-left:2px; 
}
.custom-my-5 {
  margin-top: 3rem; /* Adjust as needed */
  margin-bottom: 3rem; /* Adjust as needed */
}
.heading-resolution {
  font-size: 25px;
  line-height: 1.2;
  margin-top: 65px;
  text-align: center;
}


/* Media query for smaller screens */
@media (max-width: 768px) {
  .img-container {
    margin-bottom: 15px; /* Adjust the space between images on small screens */
    margin-right: 2px; /* Adjust the space between images on small screens */
    margin-left: 2px; /* Adjust the space between images on small screens */
  }

  .col-6 {
    margin-bottom: 20px; /* Add bottom margin for spacing */
  }

  .col-6.col-md-1 {
    margin-bottom: 15px; /* Add bottom margin for spacing */
    margin-right: 2px; /* Adjust right margin for spacing */
    margin-left: 2px; /* Adjust left margin for spacing */
  }
}