/**
 * Theme Name:     Infinite 2.0
 * Author:         Arunima Bhol
 * Template:       generatepress
 * Text Domain:	   infinite-2-0
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */
 

/* Inner Page CSS - Arunima Bhol Starts */
.page_title h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 38px;
    text-transform: uppercase;
    line-height: 42px;
    text-align: center;
    width: 100%;
  }
  .page_title {
    height: 300px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
  }
/* Inner Page CSS - Arunima Bhol Ends */

.dots-container {
  position: absolute;
  bottom: 15%;
  right: 0;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #333;
}

/* Scroll Down button Home Page */
/* Style for the scroll down button (vertically elongated circle) */
.scroll-down-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 60px; /* Vertically elongated circle */
  background-color: rgb(245, 246, 247);
  border-radius: 30px; /* Rounded corners to make it circular */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 117, 255,0.3);
  z-index: 1;
}

/* Removed hover effect for color change */
.scroll-down-btn:hover {
  transform: translateX(-50%) scale(1.1); /* Slight scale effect for a "pop" */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

/* Dot inside the vertically elongated circle */
.scroll-dot {
  width: 10px;
  height: 10px;
  background-color: #0078ff; /* Initial color of the dot */
  border-radius: 50%; /* Make it round */
  position: absolute; /* Absolute positioning to move within the circle */
  animation: bounce-and-disappear 2s ease-in-out infinite; /* Custom animation */
}

/* Custom animation for the dot: from up to down and disappear */
@keyframes bounce-and-disappear {
  0% {
    transform: translateY(-15px); /* Start from slightly above the center of the circle */
    opacity: 1; /* Visible at the start */
  }
  50% {
    transform: translateY(10px); /* Move the dot downwards */
    opacity: 1; /* Still visible */
  }
  100% {
    transform: translateY(25px); /* Move the dot down further */
    opacity: 0; /* Dot disappears when it reaches the bottom */
  }
}

html {
  scroll-behavior: smooth;
}





.banner-container{
  position: relative;
}

.services .card .image img{
  max-height: 250px;
}

.overview .services .card .image img{
  max-height: 205px;
}

.overview .card .card-content{
  text-align: left;
}
.overview .card-content ul{
  margin: 10px 0 0 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview .card-content ul li{
  display: flex;
  gap: 5px;
}
.overview .card-content ul li:before{
  content: "";
  display: flex;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-top: 4px;
}
.overview .card-content ul li span{
  flex: 1;
}

.overview .overview-technology li:nth-child(1)::before{
  background-color: #4c92d0;
}
.overview .overview-technology li:nth-child(2)::before{
  background-color: #f07725;
}
.overview .overview-technology li:nth-child(3)::before{
  background-color: #a2a2a2;
}

.overview .overview-industry li:nth-child(1)::before{
  background-color: #4c92d0;
}
.overview .overview-industry li:nth-child(2)::before{
  background-color: #f07725;
}
.overview .overview-industry li:nth-child(3)::before{
  background-color: #a2a2a2;
}
.overview .overview-industry li:nth-child(4)::before{
  background-color: #f9c100;
}
.overview .overview-industry li:nth-child(5)::before{
  background-color: #3ad0d8;
}
.overview .overview-industry li:nth-child(6)::before{
  background-color: #69aa3c;
}
.overview .overview-industry li:nth-child(7)::before{
  background-color: #2ab0e3;
}

.overview .overview-location li:nth-child(1)::before{
  background-color: #4c92d0;
}
.overview .overview-location li:nth-child(2)::before{
  background-color: #f07725;
}
.overview .overview-location li:nth-child(3)::before{
  background-color: #a2a2a2;
}

.overview .overview-staffing li:nth-child(1)::before{
  background-color: #fbc10e;
}
.overview .overview-staffing li:nth-child(2)::before{
  background-color: #a8cfeb;
}
.overview .overview-staffing li:nth-child(3)::before{
  background-color: #98cf5d;
}
.overview .overview-staffing li:nth-child(4)::before{
  background-color: #2589ae;
}
/* Apply a smooth zoom effect to images */
.text-image img, .text-action {
  transition: transform 1.5s ease-in-out; /* Slower zoom effect */
  transform: scale(0.9); /* Default scale */
  max-height: 60vh;
}

/* Zoom effect when the image or text is loaded */
.text-image img.loaded, .text-action.loaded {
  transform: scale(1); /* Apply zoom effect */
}